// ** MUI Imports
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import { Button, Stack } from '@mui/material';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Loading from 'src/components/Loading';

const TableCategories = () => {
  const router = useRouter();
  const [categories, setCategories] = useState(null);

  const handleViewClick = cid => {
    router.push(`/admin/categories/${cid}/view`);
  };

  const fetchCategory = () => {
    axios
      .get('/api/categories/list')
      .then(function (response) {
        let { data } = response;
        let { categories } = data;
        setCategories(categories);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .finally(function () {
        // always executed
      });
  };

  const handleEditClick = cid => {
    router.push(`/admin/categories/${cid}/edit`);
  };

  const handleDeleteClick = cid => {
    axios
      .delete(`/api/categories/delete?cid=${cid}`)
      .then(res => {
        fetchCategory();
      })
      .catch(err => {
        console.error(err);
      });
  };

  useEffect(() => {
    fetchCategory();
  }, []);

  if (!categories)
    return (
      <>
        <Loading />
      </>
    );

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>id</TableCell>
            <TableCell align="left">Name</TableCell>
            <TableCell align="left">Description</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {categories.map(c => (
            <TableRow
              key={c.name}
              sx={{
                '&:last-of-type td, &:last-of-type th': {
                  border: 0,
                },
              }}
            >
              <TableCell component="th" scope="row">
                {c.cid}
              </TableCell>
              <TableCell align="left">{c.name}</TableCell>
              <TableCell align="left">{c.description}</TableCell>
              <TableCell align="right">
                <Button variant="outlined" onClick={_ => handleViewClick(c.cid)}>
                  View
                </Button>
                <Button variant="outlined" onClick={_ => handleEditClick(c.cid)}>
                  Edit
                </Button>
                <Button variant="outlined" onClick={_ => handleDeleteClick(c.cid)}>
                  Delete
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default TableCategories;
