import React, { useState } from 'react';
import { deleteCategory, 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 { DeleteOutlineOutlined, Edit, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
import { Link } from 'react-router-dom';
import LinkButton from '../../components/LinkButton';
import { useDispatch } from 'react-redux';

function CategoriesPage() {
  const { data, error, isFetching } = useGetCategoriesQuery();
  const [open, setOpen] = useState(false);
  const [selectedId, setSelectedId] = useState('');
  const dispatch = useDispatch();

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

  const closeModalWindow = () => {
    setSelectedId('');
    setOpen(false);
  };

  const onDelitionSubmit = () => {
    const category = data?.CategoryFind?.find((category => category._id === selectedId));
    dispatch(deleteCategory(category));
    setOpen(false);
  }

  console.log(data?.CategoryFind);
  return (
    <>
      {isFetching ? <Loader /> :
        <>
          <LinkButton to={'/admin/category'} 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 =>
                    <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/category/${category._id}`}><Edit /></IconButton>
                      </TableCell>
                      <TableCell align='right'>
                        <IconButton onClick={() => openModalWindow(category._id)}><DeleteOutlineOutlined /></IconButton>
                      </TableCell>
                    </TableRow>
                  )}
                  <Dialog
                    open={open}
                    onClose={closeModalWindow}
                  >
                    <DialogContent>
                      <DialogContentText>Do you confirm category deletion?</DialogContentText>
                    </DialogContent>
                    <DialogActions>
                      <Button onClick={() => onDelitionSubmit()}>Yes</Button>
                      <Button onClick={closeModalWindow}>No</Button>
                    </DialogActions>
                  </Dialog>
                </TableBody>
              </Table>
            </TableContainer>
          </Paper>
        </>
      }
    </>
  )
}

export default CategoriesPage;