import { DeleteOutlineOutlined, Edit } from '@mui/icons-material';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow } from '@mui/material';
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { useGetGoodsQuery } from '../../api/api';
import LinkButton from '../../components/LinkButton';
import Loader from '../../components/Loader';

function GoodsPage() {
  const { data, isFetching } = useGetGoodsQuery();
  const [open, setOpen] = useState(false);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [selectedId, setSelectedId] = useState('');
  const dispatch = useDispatch();

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const openModalWindow = (goodId) => {
    setSelectedId(goodId);
    setOpen(true);
  };

  const closeModalWindow = () => {
    setSelectedId('');
    setOpen(false);
  };
  return (
    <>
      {isFetching ? <Loader /> :
        <>
          <LinkButton to={'/admin/good'} text={'Create good'} />
          <Paper sx={{ m: 1 }}>
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>Good</TableCell>
                    <TableCell>Category</TableCell>
                    <TableCell align='right'></TableCell>
                    <TableCell align='right'></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {data.GoodFind?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)?.map(good =>
                    <TableRow key={good?._id}>
                      <TableCell>{good?._id}</TableCell>
                      <TableCell>{good?.name}</TableCell>
                      <TableCell>{good?.categories?.map(category => category?.name)}</TableCell>
                      <TableCell align='right'>
                        <IconButton component={Link} to={`/admin/good/${good?._id}`}><Edit /></IconButton>
                      </TableCell>
                      <TableCell align='right'>
                        <IconButton onClick={() => openModalWindow(good?._id)}><DeleteOutlineOutlined /></IconButton>
                      </TableCell>
                    </TableRow>
                  )}
                  <Dialog
                    open={open}
                    onClose={closeModalWindow}
                  >
                    <DialogContent>
                      <DialogContentText>Do you confirm good deletion?</DialogContentText>
                    </DialogContent>
                    <DialogActions>
                      <Button onClick={''}>Yes</Button>
                      <Button onClick={closeModalWindow}>No</Button>
                    </DialogActions>
                  </Dialog>
                </TableBody>
              </Table>
            </TableContainer>
            <TablePagination
              rowsPerPageOptions={[10, 20, 30]}
              component="div"
              count={data?.GoodFind?.length}
              rowsPerPage={rowsPerPage}
              page={page}
              onPageChange={handleChangePage}
              onRowsPerPageChange={handleChangeRowsPerPage} />
          </Paper>
        </>
      }
    </>
  )
}

export default GoodsPage;