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

function Categories() {
  const { data, error, isFetching, refetch } = useGetCategoriesQuery();
  const [open, setOpen] = useState([]);

  useEffect(() => {
    if (data) {
      refetch();
      setOpen(new Array(data.CategoryFind.length).fill(false));
      console.log(open);
    }
  }, [data]);

  const handleClickOpen = (event, selectedIndex) => {
    setOpen(open.map((item, i) => i == selectedIndex));
  };

  const handleClose = () => {
    setOpen(false);
  };
  console.log(data?.CategoryFind);
  return (
    <>
      {isFetching || data?.CategoryFind?.length == 0 ? <Loader /> :
        <>
          <LinkButton to={'/admin/createCategory'} text={'Create category'} />
          <Paper sx={{ m: 1 }}>
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>Category</TableCell>
                    <TableCell>Goods count</TableCell>
                    <TableCell align='right'></TableCell>
                    <TableCell align='right'></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {data.CategoryFind?.map((category, i) =>
                    <TableRow key={category._id}>
                      <TableCell>{category._id}</TableCell>
                      <TableCell>{category.name}</TableCell>
                      <TableCell>{category.goods?.length || 0}</TableCell>
                      <TableCell align='right'>
                        <IconButton component={Link} to={'/admin/createCategory'}><EditIcon /></IconButton>
                      </TableCell>
                      <TableCell align='right'>
                        <IconButton onClick={(event) => handleClickOpen(event, i)}><DeleteOutlineOutlinedIcon /></IconButton>
                        <Dialog
                          open={open[i]}
                          onClose={handleClose}
                        >
                          <DialogContent>
                            <DialogContentText>Do you confirm category deletion?</DialogContentText>
                          </DialogContent>
                          <DialogActions>
                            <Button onClick={handleClose}>No</Button>
                            <Button onClick={handleClose} autoFocus>Yes</Button>
                          </DialogActions>
                        </Dialog>

                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </TableContainer>
          </Paper>
        </>
      }
    </>
  )
}

export default Categories;