text: /* eslint-disable prettier/prettier */
  import React, { memo, useEffect } from 'react';
  import PropTypes from 'prop-types';
  import {
    makeStyles,
    List,
    FormControlLabel,
    Icon,
    Button,
    Menu,
    MenuItem,
  } from '@material-ui/core';
  import { fade, darken } from '@material-ui/core/styles/colorManipulator'
  import AddIcon from '@material-ui/icons/Add';
  import MUIDataTable from 'mui-datatables';
  import { compose } from 'redux';
  import { connect } from 'react-redux';
  import _ from 'lodash';
  import { createStructuredSelector } from 'reselect';
  import * as Actions from '../actions';
  import * as Selectors from '../selectors';
  import LoadingIndicator from '../../../../components/LoadingIndicator';
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1
    },
    datatable: {
      '& .MuiTableRow-root:hover': {
        cursor: 'pointer'
      },
      '& .MuiTableHead-root': {
        '& .MuiTableCell-head': {
          color: theme.palette.common.white,
        },
        '& .MuiTableCell-root:nth-child(odd)': {
          backgroundColor: theme.palette.primary.main,
        },
        '& .MuiTableCell-root:nth-child(even)': {
          backgroundColor: darken(theme.palette.primary.main, 0.1),
        },
      },
    },
  }));
  
  const WarehouseList = props => {
    const classes = useStyles();
  
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    const handleClick = event => {
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () => {
      setAnchorEl(null);
    };
  
    const {
      loading,
      openNewWarehouseDialogAction,
      getAllWarehouses,
      openEditWarehouseDialogAction,
      getAllEmployeesAction,
    } = props;
  
    useEffect(() => {
      getAllEmployeesAction();
    }, []);
  
    const orderedWarehouses = _.orderBy(getAllWarehouses, 'dateCreated', 'desc')
  
    const columns = [
      {
        name: 'Id',
        label: 'S/N',
        options: {
          filter: true,
          customBodyRender: (value, tableMeta) => {
            if (value === '') {
              return '';
            }
            return (
              <FormControlLabel
                label={tableMeta.rowIndex + 1}
                control={<Icon />}
              />
            );
          },
        },
      },
      {
        name: 'name',
        label: 'Warehouse Name',
        options: {
          filter: true,
          sort: false,
        },
      },
      {
        name: 'state',
        label: 'State',
        options: {
          filter: true,
          sort: false,
        },
      },
      {
        name: 'wareHouseContactEmail',
        label: 'WareHouse Email Address',
        options: {
          filter: true,
          sort: false,
        },
      },
      {
        name: 'warehousePhoneNumber',
        label: 'Warehouse Phone Number',
        options: {
          filter: true,
          sort: false,
        },
      },
      {
        name: 'id',
        label: 'Action',
        options: {
          filter: true,
          sort: false,
          customBodyRender: value => {
            const item = getAllWarehouses.find(post => value === post.id);
            if (value === '') {
              return '';
            }
            return (
              <div>
                <Button
                  aria-controls="simple-menu"
                  aria-haspopup="true"
                  onClick={handleClick}
                >
                  Options
                </Button>
                <Menu
                  id="simple-menu"
                  anchorEl={anchorEl}
                  keepMounted
                  open={Boolean(anchorEl)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={() => openEditWarehouseDialogAction(item)}>
                    Edit
                  </MenuItem>
                  <MenuItem onClick={handleClose}>Deactivate</MenuItem>
                </Menu>
              </div>
            );
          },
        },
      },
    ];
  
    const options = {
      filterType: 'checkbox',
      responsive: 'scrollMaxHeight',
      selectableRows: 'none',
      customToolbar: () => (
        <Button
          variant="contained"
          color="primary"
          size="small"
          className={classes.button}
          startIcon={<AddIcon />}
          onClick={() => openNewWarehouseDialogAction()}
        >
          Add New Warehouse
        </Button>
      ),
      elevation: 0
    };
  
    if (loading) {
      return <LoadingIndicator />;
    }
  
    return (
      <React.Fragment>
        <MUIDataTable
          className={classes.datatable}
          title="All Warehouses"
          data={orderedWarehouses}
          columns={columns}
          options={options}
        />
      </React.Fragment>
    );
  };
  
  WarehouseList.propTypes = {
    loading: PropTypes.bool,
    openNewWarehouseDialogAction: PropTypes.func,
    openEditWarehouseDialogAction: PropTypes.func,
    getAllWarehouses: PropTypes.array,
    getAllEmployeesAction: PropTypes.func,
  };
  
  const mapStateToProps = createStructuredSelector({
    loading: Selectors.makeSelectLoading(),
    getAllWarehouses: Selectors.makeSelectGetAllWarehouses(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      openNewWarehouseDialogAction: () =>
        dispatch(Actions.openNewWarehouseDialog()),
      getAllEmployeesAction: () =>
        dispatch(Actions.getAllEmployees()),
      openEditWarehouseDialogAction: evt =>
        dispatch(Actions.openEditWarehouseDialog(evt)),
    };
  }
  
  const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
  );
  
  export default compose(
    withConnect,
    memo,
  )(WarehouseList);
  