text: /**
   *
   * Contact
   *
   */
  import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { withRouter } from 'react-router-dom';
  import { createStructuredSelector } from 'reselect';
  import { push } from 'connected-react-router';
  import { compose } from 'redux';
  import moment from 'moment';
  import { Helmet } from 'react-helmet';
  
  // @material-ui/core components
  import withStyles from '@material-ui/core/styles/withStyles';
  import Tooltip from '@material-ui/core/Tooltip';
  import IconButton from '@material-ui/core/IconButton';
  import SearchIcon from '@material-ui/icons/Search';
  import Close from '@material-ui/icons/Close';
  import View from '@material-ui/icons/RemoveRedEyeOutlined';
  
  // core components
  import Table from 'components/Table/Table';
  
  import injectSaga from '../../../utils/injectSaga';
  import injectReducer from '../../../utils/injectReducer';
  import reducer from './reducer';
  import saga from './saga';
  import * as mapDispatchToProps from './actions';
  import { makeSelectAll, makeSelectQuery, makeSelectLoading } from './selectors';
  import { DATE_FORMAT } from '../../App/constants';
  
  import PageHeader from '../../../components/PageHeader/PageHeader';
  import PageContent from '../../../components/PageContent/PageContent';
  import DeleteDialog from '../../../components/DeleteDialog';
  import Loading from '../../../components/Loading';
  
  const styles = theme => ({
    button: {
      margin: theme.spacing.unit,
    },
    fab: {
      width: '40px',
      height: '40px',
      marginTop: 'auto',
      marginBottom: 'auto',
    },
    tableActionButton: {
      padding: 0,
      '&:hover': {
        background: 'transparent',
        color: '#404040',
      },
    },
    waftsrch: {
      padding: 0,
      position: 'absolute',
      borderLeft: '1px solid #d9e3e9',
      borderRadius: 0,
      '&:hover': {
        background: 'transparent',
        color: '#404040',
      },
    },
  });
  
  /* eslint-disable react/prefer-stateless-function */
  export class Contact extends React.Component {
    static propTypes = {
      loadAllRequest: PropTypes.func.isRequired,
      setQueryValue: PropTypes.func.isRequired,
      push: PropTypes.func.isRequired,
      classes: PropTypes.object.isRequired,
      query: PropTypes.object.isRequired,
      all: PropTypes.shape({
        data: PropTypes.array.isRequired,
        page: PropTypes.number.isRequired,
        size: PropTypes.number.isRequired,
        totaldata: PropTypes.number.isRequired,
      }),
    };
  
    state = {
      open: false,
      deleteId: '',
    };
  
    componentDidMount() {
      this.props.loadAllRequest(this.props.query);
    }
  
    handleQueryChange = e => {
      e.persist();
      this.props.setQueryValue({ key: e.target.name, value: e.target.value });
    };
  
    handleSearch = () => {
      this.props.loadAllRequest(this.props.query);
    };
  
    handlePagination = paging => {
      this.props.loadAllRequest(paging);
    };
  
    handleView = id => {
      this.props.push(`/admin/contact-manage/view/${id}`);
    };
  
    handleAdd = () => {
      this.props.clearOne();
      this.props.push('/admin/contact-manage/add');
    };
  
    handleOpen = id => {
      this.setState({ open: true, deleteId: id });
    };
  
    handleClose = () => {
      this.setState({ open: false });
    };
  
    handleDelete = id => {
      this.props.deleteOneRequest(id);
      this.setState({ open: false });
    };
  
    render() {
      const { classes } = this.props;
      const {
        all: { data, page, size, totaldata },
        query,
        loading,
      } = this.props;
      const tablePagination = { page, size, totaldata };
      const tableData = data.map(({ name, email, subject, added_at, _id }) => [
        name,
        email,
        subject,
        moment(added_at).format(DATE_FORMAT),
  
        <React.Fragment>
          <Tooltip
            id="tooltip-top"
            title="View Contacts"
            placement="top"
            classes={{ tooltip: classes.tooltip }}
          >
            <IconButton
              aria-label="View"
              className={classes.tableActionButton}
              onClick={() => this.handleView(_id)}
            >
              <View
                className={`${classes.tableActionButtonIcon} ${classes.edit}`}
              />
            </IconButton>
          </Tooltip>
          <Tooltip
            id="tooltip-top-start"
            title="Remove"
            placement="top"
            classes={{ tooltip: classes.tooltip }}
          >
            <IconButton
              aria-label="Close"
              className={classes.tableActionButton}
              onClick={() => this.handleOpen(_id)}
            >
              <Close
                className={`${classes.tableActionButtonIcon} ${classes.close}`}
              />
            </IconButton>
          </Tooltip>
        </React.Fragment>,
      ]);
  
      return (
        <>
          <DeleteDialog
            open={this.state.open}
            doClose={this.handleClose}
            doDelete={() => this.handleDelete(this.state.deleteId)}
          />
          <Helmet>
            <title>Contact List</title>
          </Helmet>
          <div className="flex justify-between mt-3 mb-3">
            {loading && loading == true ? <Loading /> : <></>}
            <PageHeader>Contact List</PageHeader>
          </div>
          <PageContent loading={loading}>
            <div className="flex justify-end">
              <div className="flex relative mr-2">
                <input
                  type="text"
                  name="find_name"
                  id="contact-name"
                  placeholder="Search Contacts"
                  className="m-auto inputbox"
                  value={query.find_name}
                  onChange={this.handleQueryChange}
                />
                <IconButton
                  aria-label="Search"
                  className={`${classes.waftsrch} waftsrchstyle`}
                  onClick={this.handleSearch}
                >
                  <SearchIcon />
                </IconButton>
              </div>
            </div>
  
            <Table
              tableHead={['Name', 'Email', 'Subject', 'Added at', 'Actions']}
              tableData={tableData}
              pagination={tablePagination}
              handlePagination={this.handlePagination}
            />
          </PageContent>
        </>
      );
    }
  }
  
  const mapStateToProps = createStructuredSelector({
    all: makeSelectAll(),
    query: makeSelectQuery(),
    loading: makeSelectLoading(),
  });
  
  const withConnect = connect(
    mapStateToProps,
    { ...mapDispatchToProps, push },
  );
  
  const withReducer = injectReducer({ key: 'adminContactListPage', reducer });
  const withSaga = injectSaga({ key: 'adminContactListPage', saga });
  
  const withStyle = withStyles(styles);
  
  export default compose(
    withRouter,
    withStyle,
    withReducer,
    withSaga,
    withConnect,
  )(Contact);
  