import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CustomFixedTable from 'components/enhancers/CustomFixedTable';
import TableListItem from 'components/listItems/TableListItem';
import adminConfig from 'config/admin';

import ModuleButton from 'components/items/ModuleButton';
import ModuleList from 'components/pageItems/ModuleList';
import qs from 'query-string';
import styleIdentifiers from './list.scss';

const styles = classNames.bind(styleIdentifiers);

const EnhancedTable = CustomFixedTable(TableListItem);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ListProps = StateProps & DispatchProps & OwnProps;

const List = (props: ListProps) => {
  const {
    lg,
    loadData,
    deleteItem,
    event,
    history,
    match: { params },
  } = props;

  const options = adminConfig?.adminEvent[params.resource];
  const resource = event && event[params.resource];

  const [checked, setChecked] = useState([]);

  function renderActions() {
    return (
      <div className={styles('buttons')}>
        {!options.noCreate && (
          <ModuleButton
            noMargin
            icon="plus"
            color="primary"
            action={() => history.push(`/event/${params.resource}/add`)}
            relative
          />
        )}
      </div>
    );
  }

  function renderDetailLink(e) {
    if (params.resource === 'events') {
      history.push(`/event/${params.resource}/${e._id}/detail`);
    } else {
      history.push(`/event/${params.resource}/${e._id}`);
    }
  }

  function deleteData(elem) {
    deleteItem({
      id: elem._id,
      options,
      resource: params.resource,
    });
  }

  function loadDataPage(inputs) {
    loadData({
      options: {
        ...options,
        inputModel: {
          ...options.inputModel,
          ...inputs,
        },
      },
      resource: params.resource,
    });
  }

  function renderActionList() {
    switch (params.resource) {
      default:
        return false;
    }
  }

  const handleChecked = latestChecked => {
    if (!latestChecked || !checked) return;

    if (checked.length !== latestChecked.length) {
      setChecked(latestChecked);
    }
  };

  useEffect(() => {
    loadDataPage(qs.parse(location.search));
  }, [location]);

  const subNav = options && options.subNav;

  return (
    <ModuleList
      className={styles('List')}
      loadFunc={loadDataPage}
      subNav={subNav}
      actions={renderActionList()}
      options={options}
      noBorderTitle={!options.listMode}
      checked={checked}
    >
      <EnhancedTable
        virtual
        lg={lg}
        headers={(options && options.headers) || []}
        loadFunc={loadDataPage}
        loading={resource && resource.loading}
        loaded={resource && resource.loaded}
        requestData={resource && resource.requestData}
        actions={renderActions()}
        itemProps={{
          actionDetail: e => renderDetailLink(e),
          actionEdit: e => history.push(`/event/${params.resource}/${e._id}/edit`),
          actionDelete: e => deleteData(e),
          fastDelete: options.deleteMethod,
          noUpdate: options.noUpdate,
        }}
        items={(resource && resource.data) || []}
        options={options}
        handleChecked={handleChecked}
        noCheckbox
        noHeader
      />
    </ModuleList>
  );
};

export default List;
