import DataGrid from '@gravityforms/components/react/admin/modules/DataGrid';
import {
  ActiveFilters,
  BulkActions,
  ColumnSort,
  DateFilters,
  GridPagination,
  Search,
  SimpleFilters,
} from '@gravityforms/components/react/admin/modules/DataGrid/modules';
import useDataGridState from '@gravityforms/components/react/admin/modules/DataGrid/use-data-grid-state';
import StatusIndicator from '@gravityforms/components/react/admin/elements/StatusIndicator';
import Text from '@gravityforms/components/react/admin/elements/Text';

const activeFiltersAttributes = {
  pill: {
    icon: 'x-circle',
    iconPrefix: 'gravity-component-icon',
    onClick: ( event ) => {},
    // ...restPillAttributes (see Pill component)
  },
  reset: {
    label: 'Reset Filters',
    onClick: ( event ) => {},
    // ...restButtonAttributes (see Button component)
  },
  i18n: {
    activeFiltersLabel: 'Filters:',
  },
  onFilterChange: ( state ) => {},
};

const bulkActionsAttributes = {
  button: {
    label: 'Apply',
    onClick: ( state ) => {},
    // ...restButtonAttributes (see Button component)
  },
  select: {
    blankValue: -1,
    onChange: ( value ) => {},
    wrapperClasses: [],
    labelAttributes: {
      label: 'Select an action',
      isVisible: false,
    },
    options: [
      {
        label: 'Bulk Actions',
        value: '-1',
      },
      {
        label: 'Delete',
        value: 'delete',
      },
    },
    // ...restSelectAttributes (see Select component)
  },
  i18n: {
    bulkSelectI18n: 'Select all rows',
    selectNoticeSelectedNumberEntriesI18n: 'All %1$s rows on this page are selected',
    selectNoticeSelectedAllNumberEntriesI18n: 'All %1$s rows in this table are selected',
    selectNoticeSelectAllNumberEntriesI18n: 'Select All %1$s Rows',
    selectNoticeClearSelectionI18n: 'Clear Selection',
    selectRowI18n: 'Select row',
  },
  notice: {
    rowCount: 315, // Total number of rows in the data grid.
  },
};

const columnSortAttributes = {
  sortButton: {
    customClasses: [],
    iconAsc: 'chevron-up',
    iconDesc: 'chevron-down',
    iconPrefix: 'gravity-component-icon',
    initialOrder: 'DESC',
    onClick: ( state ) => {},
  },
};

const dateFiltersAttributes = {
  calendarAttributes: {
    // ...restCalendarAttributes (see Calendar component)
  },
  customClasses: [],
  dateFormatOptions: {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  },
  triggerAttributes: {
    ariaText: 'Calendar',
    icon: 'calendar',
    iconPrefix: 'gravity-component-icon',
    // ...restButtonAttributes (see Button component)
  },
  onChange: ( state ) => {},
  resetAttributes: {
    label: 'Reset',
    // ...restResetAttributes (see Button component)
  },
  todayAttributes: {
    label: 'Today',
    // ...restTodayAttributes (see Button component)
  },
  i18n: {
    pillLabel: 'Date: %s',
  },
  // ...restDateFiltersAttributes (see Calendar component)
};

const paginationAttributes = {
  nextLabel: 'Next',
  nextAriaLabel: 'Next page',
  onClick: ( state ) => {},
  onPageChange: ( event ) => {},
  pageCount: 15,
  previousLabel: 'Prev',
  previousAriaLabel: 'Previous page',
  // ...restPaginationAttributes (see Pagination component)
};

const searchAttributes = {
  input: {
    onChange: ( value ) => {},
    onClear: () => {},
    onKeyDown: ( event ) => {},
    wrapperClasses: [],
    // ...restInputAttributes (see Input component)
  },
  button: {
    customClasses: [],
    // ...restButtonAttributes (see Button component)
  },
  onSearch: ( state ) => {},
  i18n: {
    noResultsTitle: 'No results found',
    noResultsMessage: 'Try adjusting your search criteria.',
    pillLabel: 'Search: %s',
  },
  noResults: {
    customClasses: [],
    Image: NoResultsImage,
    // ...restAttributes (for NoResults component)
  },
};

const simpleFiltersAttributes = {
  droplist: {
    customClasses: [],
    listItems: [
      {
        key: 'status',
        triggerAttributes: {
          id: 'status',
          label: 'Status',
        },
        listItems: [
          {
            key: 'status-sent',
            props: {
              customAttributes: {
                'data-key': 'status',
                'data-value': 'sent',
                'data-pill-label': 'Status: Sent',
                id: 'status-sent',
              },
              element: 'button',
              label: 'Sent',
            },
          },
          {
            key: 'status-failed',
            props: {
              customAttributes: {
                'data-key': 'status',
                'data-value': 'failed',
                'data-pill-label': 'Status: Failed',
                id: 'status-failed',
              },
              element: 'button',
              label: 'Failed',
            },
          },
        ],
      },
      {
        key: 'service',
        triggerAttributes: {
          id: 'service',
          label: 'Service',
        },
        listItems: [
          {
            key: 'service-mailgun',
            props: {
              customAttributes: {
                'data-key': 'service',
                'data-value': 'mailgun',
                'data-pill-label': 'Service: Mailgun',
                id: 'service-mailgun',
              },
              element: 'button',
              label: 'Mailgun',
            },
          },
          {
            key: 'service-sendgrid',
            props: {
              customAttributes: {
                'data-key': 'service',
                'data-value': 'sendgrid',
                'data-pill-label': 'Service: SendGrid',
                id: 'service-sendgrid',
              },
              element: 'button',
              label: 'SendGrid',
            },
          },
        ],
      },
    ],
    listItemAttributes: {
      iconAfter: 'check-alt',
      groupIcon: 'chevron-right',
      iconPrefix: 'gravity-component-icon',
    },
    reset: {
      hasReset: true,
      label: 'Reset Filters',
    },
    triggerAttributes: {
      ariaId: 'aria-text',
      ariaText: 'Filter by',
      icon: 'filter',
      iconPrefix: 'gravity-component-icon',
      size: 'size-height-m',
      // ...restTriggerAttributes (see Droplist component)
    },
    // ...restDroplistAttributes (see Droplist component)
  },
};

const modules = [ ActiveFilters, BulkActions, ColumnSort, DateFilters, GridPagination, Search, SimpleFilters ];

const moduleAttributes = {
  activeFilters: activeFiltersAttributes,
  bulkActions: bulkActionsAttributes,
  columnSort: columnSortAttributes,
  dateFilters: dateFiltersAttributes,
  pagination: paginationAttributes,
  search: searchAttributes,
  simpleFilters: simpleFiltersAttributes,
};

const columns = [
  {
    component: Text,
    hideWhenLoading: true,
    key: 'status',
    props: {
      content: 'Status',
      size: 'text-sm',
      weight: 'medium',
    },
    sortable: true,
    variableLoader: true,
  },
  {
    component: Text,
    hideAt: 960,
    hideWhenLoading: true,
    key: 'service',
    props: {
      content: 'Service',
      size: 'text-sm',
      weight: 'medium',
    },
    sortable: true,
  },
];

const columnStyleProps = {
  status: { flex: '0 0 120px' },
  service: { flexBasis: '100px' },
};

const initialData = [
  {
    status: {
      component: StatusIndicator,
      props: {
        label: 'Sent',
      },
    },
    service: {
      component: Text,
      props: {
        content: 'Mailgun',
        size: 'text-sm',
      },
    },
  },
  {
    status: {
      component: StatusIndicator,
      props: {
        label: 'Failed',
      },
    },
    service: {
      component: Text,
      props: {
        content: 'SendGrid',
        size: 'text-sm',
      },
    },
  }
];

const useAjax = true;

const {
  moduleState,
  updateModuleState,
  isLoading,
  setIsLoading,
  gridLocked,
  organizedData,
} = useDataGridState( {
  data: initialData,
  dataPerPage: 10,
  initialState: {
    isLoading: false,
    moduleState: {
      currentPage: 0,
      searchTerm: '',
      searchActive: false,
    },
  },
  modules,
  moduleAttributes,
  useAjax,
} );

return <DataGrid
  columns={ columns }
  columnStyleProps={ columnStyleProps }
  data={ organizedData }
  dataPerPage={ 10 }
  EmptyImage={ EmptyImageSvg }
  emptyMessageAttributes={ { style: { maxWidth: '360px' } } },
  gridLocked={ gridLocked }
  i18n={ {
    emptyMessageI18n: 'No data available',
    emptyTitleI18n: 'No Data',
    gridHeadingI18n: 'Data Grid Title',
  } }
  isLoading={ isLoading }
  modules={ modules }
  moduleAttributes={ moduleAttributes }
  moduleState={ moduleState }
  setIsLoading={ setIsLoading }
  updateModuleState={ updateModuleState }
  useAjax={ useAjax }
/>;