text: import { filter } from 'lodash';
  import { Icon } from '@iconify/react';
  import { useState, useEffect } from 'react';
  import axios from 'axios';
  import plusFill from '@iconify/icons-eva/plus-fill';
  // material
  import {
    Card,
    Table,
    Stack,
    Button,
    Checkbox,
    TableRow,
    TableBody,
    TableCell,
    Container,
    Typography,
    TableContainer,
    TablePagination,
    TextField
  } from '@material-ui/core';
  
  // Modal Importations
  import Modal from '@material-ui/core/Modal';
  import { makeStyles } from '@material-ui/styles';
  import { DatePicker } from '@material-ui/lab';
  
  // components
  import Page from '../../components/Page';
  import Scrollbar from '../../components/Scrollbar';
  import SearchNotFound from '../../components/SearchNotFound';
  import { UserListHead } from '../../components/_dashboard/user';
  import { SiteListToolbar, SiteMoreMenu } from '../../components/_dashboard/site';
  
  // import { numberValidation } from '../../utils/validate';
  
  // ----------------------------------------------------------------------
  
  const TABLE_HEAD = [
    { id: 'index', label: 'Index', alignRight: false },
    { id: 'name', label: 'Name', alignRight: false },
    { id: '' }
  ];
  
  // ----------------------------------------------------------------------
  
  function descendingComparator(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) {
      return -1;
    }
    if (b[orderBy] > a[orderBy]) {
      return 1;
    }
    return 0;
  }
  
  function getComparator(order, orderBy) {
    return order === 'desc'
      ? (a, b) => descendingComparator(a, b, orderBy)
      : (a, b) => -descendingComparator(a, b, orderBy);
  }
  
  function applySortFilter(array, comparator, query) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {
      const order = comparator(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    if (query) {
      return filter(array, (_user) => _user.name.toLowerCase().indexOf(query.toLowerCase()) !== -1);
    }
    return stabilizedThis.map((el) => el[0]);
  }
  
  const useStyles = makeStyles((theme) => ({
    modal: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    paper: {
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3)
    }
  }));
  
  export default function Site() {
    const [page, setPage] = useState(0);
    const [order, setOrder] = useState('asc');
    const [selected, setSelected] = useState([]);
    const [orderBy, setOrderBy] = useState('name');
    const [filterName, setFilterName] = useState('');
    const [rowsPerPage, setRowsPerPage] = useState(5);
  
    const [siteTab, setSiteTab] = useState([]);
    const [siteindexInput, setSiteIndexInput] = useState('');
    const [sitenameInput, setSiteNameInput] = useState('');
  
    const [dataChange, setDataChange] = useState(false);
  
    // Modal
    const [openModal, setOpenModal] = useState(false);
    const classes = useStyles();
  
    useEffect(() => {
      axios(`${process.env.REACT_APP_BASE_URL}/site/`, {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_TOKEN}`
        }
      })
        .then((value) => {
          setSiteTab(value.data);
        })
        .catch(() => {});
    }, []);
  
    useEffect(() => {
      axios(`${process.env.REACT_APP_BASE_URL}/site/`, {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_TOKEN}`
        }
      })
        .then((value) => {
          setSiteTab(value.data);
        })
        .catch(() => {});
    }, [dataChange]);
  
    const isDataChange = () => {
      if (dataChange) {
        setDataChange(false);
      } else {
        setDataChange(true);
      }
    };
  
    const handleOpen = () => {
      setOpenModal(true);
    };
  
    const handleClose = () => {
      setOpenModal(false);
    };
  
    const addRate = (siteindexInput, sitenameInput) => {
      if (
        siteindexInput !== '' &&
        siteindexInput !== null &&
        sitenameInput !== '' &&
        sitenameInput !== null
      )
        axios
          .post(
            `${process.env.REACT_APP_BASE_URL}/site/`,
            { index: siteindexInput, name: sitenameInput },
            {
              headers: {
                Authorization: `Bearer ${process.env.REACT_APP_TOKEN}`
              }
            }
          )
          .then(() => {
            isDataChange();
            handleClose();
  
            setSiteIndexInput('');
            setSiteNameInput('');
          })
          .catch(() => {
            setSiteIndexInput('');
            setSiteNameInput('');
          });
    };
  
    const handleRequestSort = (event, property) => {
      const isAsc = orderBy === property && order === 'asc';
      setOrder(isAsc ? 'desc' : 'asc');
      setOrderBy(property);
    };
  
    const handleSelectAllClick = (event) => {
      if (event.target.checked) {
        const newSelecteds = setSiteTab.map((n) => n.name);
        setSelected(newSelecteds);
        return;
      }
      setSelected([]);
    };
  
    const handleClick = (event, name) => {
      const selectedIndex = selected.indexOf(name);
      let newSelected = [];
      if (selectedIndex === -1) {
        newSelected = newSelected.concat(selected, name);
      } else if (selectedIndex === 0) {
        newSelected = newSelected.concat(selected.slice(1));
      } else if (selectedIndex === selected.length - 1) {
        newSelected = newSelected.concat(selected.slice(0, -1));
      } else if (selectedIndex > 0) {
        newSelected = newSelected.concat(
          selected.slice(0, selectedIndex),
          selected.slice(selectedIndex + 1)
        );
      }
      setSelected(newSelected);
    };
  
    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(parseInt(event.target.value, 10));
      setPage(0);
    };
  
    const handleFilterByName = (event) => {
      setFilterName(event.target.value);
    };
  
    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - setSiteTab.length) : 0;
  
    const filteredSite = applySortFilter(siteTab, getComparator(order, orderBy), filterName);
  
    const isUserNotFound = filteredSite.length === 0;
  
    return (
      <Page title="Site | LMC App">
        <Container>
          <Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
            <Typography variant="h4" gutterBottom>
              Site
            </Typography>
            <Button
              variant="contained"
              startIcon={<Icon icon={plusFill} />}
              onClick={() => handleOpen()}
            >
              Nouveau Site
            </Button>
          </Stack>
  
          {openModal ? (
            <Modal
              aria-describedby="simple-modal-description"
              className={classes.modal}
              open={openModal}
              onClose={handleClose}
            >
              <div className={classes.paper}>
                <h2 id="simple-modal-title">Ajouter un Site</h2>
                <TextField
                  label="Saisissez la date"
                  variant="outlined"
                  style={{ marginTop: 20, marginBottom: 20 }}
                  value={siteindexInput}
                  onChange={(e) => setSiteIndexInput(e.target.value)}
                />
                <TextField
                  label="Saisissez le Taux"
                  variant="outlined"
                  style={{ marginTop: 20, marginBottom: 20 }}
                  value={sitenameInput}
                  onChange={(e) => setSiteNameInput(e.target.value)}
                />
                <Button
                  onClick={() => addRate(siteindexInput, sitenameInput)}
                  variant="contained"
                  startIcon={<Icon icon={plusFill} />}
                >
                  Ajouter
                </Button>
              </div>
            </Modal>
          ) : null}
  
          <Card>
            <SiteListToolbar
              numSelected={selected.length}
              filterName={filterName}
              onFilterName={handleFilterByName}
            />
  
            <Scrollbar>
              <TableContainer sx={{ minWidth: 800 }}>
                <Table>
                  <UserListHead
                    order={order}
                    orderBy={orderBy}
                    headLabel={TABLE_HEAD}
                    rowCount={setSiteTab.length}
                    numSelected={selected.length}
                    onRequestSort={handleRequestSort}
                    onSelectAllClick={handleSelectAllClick}
                  />
                  <TableBody>
                    {filteredSite
                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                      .map((row) => {
                        const { id, index, name } = row;
                        const isItemSelected = selected.indexOf(name) !== -1;
  
                        return (
                          <TableRow
                            hover
                            key={id}
                            tabIndex={-1}
                            role="checkbox"
                            selected={isItemSelected}
                            aria-checked={isItemSelected}
                          >
                            <TableCell padding="checkbox">
                              <Checkbox
                                checked={isItemSelected}
                                onChange={(event) => handleClick(event, name)}
                              />
                            </TableCell>
                            <TableCell component="th" scope="row" padding="none">
                              <Stack direction="row" alignItems="center" spacing={2}>
                                <Typography variant="subtitle2" noWrap>
                                  {index}
                                </Typography>
                              </Stack>
                            </TableCell>
                            <TableCell component="th" scope="row" padding="none">
                              <Stack direction="row" alignItems="center" spacing={2}>
                                <Typography variant="subtitle2" noWrap>
                                  {name}
                                </Typography>
                              </Stack>
                            </TableCell>
  
                            <TableCell align="right">
                              <SiteMoreMenu
                                idSite={id}
                                sendInformation={(value) => isDataChange(value)}
                              />
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    {emptyRows > 0 && (
                      <TableRow style={{ height: 53 * emptyRows }}>
                        <TableCell colSpan={6} />
                      </TableRow>
                    )}
                  </TableBody>
                  {isUserNotFound && (
                    <TableBody>
                      <TableRow>
                        <TableCell align="center" colSpan={6} sx={{ py: 3 }}>
                          <SearchNotFound searchQuery={filterName} />
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  )}
                </Table>
              </TableContainer>
            </Scrollbar>
  
            <TablePagination
              rowsPerPageOptions={[5, 10, 25]}
              component="div"
              count={setSiteTab.length}
              rowsPerPage={rowsPerPage}
              page={page}
              onPageChange={handleChangePage}
              onRowsPerPageChange={handleChangeRowsPerPage}
            />
          </Card>
        </Container>
      </Page>
    );
  }
  