/* ---------------------------------- @mui ---------------------------------- */
import { Stack, Button, Typography, MenuItem } from '@mui/material';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';

/* -------------------------------- component ------------------------------- */
import TableComponent from '../../components/Table';
/* ---------------------------------- theme --------------------------------- */
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell } from '../../@types/table';
import { useNavigate } from 'react-router-dom';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';

export default function List() {
  const navigate = useNavigate();
  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const controller = new AbortController();

  const [data, setData] = useState([]);

  /* -------------------------------------------------------------------------- */
  /*                          setting up for the table                          */
  /* -------------------------------------------------------------------------- */
  const [isLoading, setIsLoading] = useState(true);

  const loadings = {
    isLoading: isLoading,
    setIsLoading: setIsLoading,
  };

  /* -------------------------------- headCell -------------------------------- */
  const headCells: HeadCell<never>[] = [
    {
      id: 'code',
      align: 'left',
      label: 'Code',
      isSort: false,
    },
    {
      id: 'name',
      align: 'left',
      label: 'Name',
      isSort: false,
    },
    {
      id: 'active',
      align: 'center',
      label: 'Status',
      isSort: false,
    },
    {
      id: 'action',
      align: 'center',
      label: '',
      isSort: false,
    },
  ];
  /* -------------------------------------------------------------------------- */

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);

        const [response] = await Promise.all([
          axios.get(`${corporateValue}/corporate`, { signal: controller.signal }),
        ]);

        setData(
          response.data.data.map((obj: any) => ({
            ...obj,
            active:
              obj.active === 1 ? (
                <Typography
                  variant="overline"
                  sx={{
                    backgroundColor: 'rgba(84, 214, 44, 0.16)',
                    color: '#229A16',
                    paddingX: 1.5,
                    paddingY: 1,
                    display: 'inline-flex',
                    alignItems: 'center',
                    borderRadius: '10px',
                  }}
                >
                  Active
                </Typography>
              ) : (
                <Button variant="outlined" color="error">
                  Inactive
                </Button>
              ),
            action: (
              <TableMoreMenu
                actions={
                  <>
                    <MenuItem onClick={() => navigate(`/corporate/edit`)}>
                      <EditOutlinedIcon />
                      Edit
                    </MenuItem>
                    <MenuItem onClick={() => navigate(`/corporate/view`)}>
                      <VisibilityOutlinedIcon />
                      View
                    </MenuItem>
                  </>
                }
              />
            ),
          }))
        );

        setIsLoading(false);
      } catch (error: any) {
        console.error('Error fetching data:', error.message);
      }

      return () => {
        controller.abort();
      };
    })();
  }, [corporateValue]);

  return (
    <Stack>
      <TableComponent headCells={headCells} rows={data} loadings={loadings} />
    </Stack>
  );
}
