import React from "react";
import TableItems from "../components/Table";
import ListHeader from "../../../components/ListHeader";
import EmptyList from "../../../components/EmptyList";
import Banner from "../../../components/Banner";
import AddModal from "../new";
import EditModal from "../edit";
import DeleteModal from "../delete";
import useItems from "./useItems";
import { CircularProgress, Box } from "@mui/material";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
import { getUser } from '../../../tokenUtility'

const List = () => {
  const [formModalopen, setFormModalopen] = React.useState({
    selectedItem: {},
    open: false,
  });
  const [deleteModalopen, setDeleteModalopen] = React.useState({
    selectedItem: {},
    open: false,
  });
  const [apiStatus, setApiStatus] = React.useState({
    show: false,
    status: "",
    message: "",
  });
  const handleClickFormModalOpen = () => {
    setFormModalopen({ open: true });
  };
  const isEdit = !!formModalopen.selectedItem;

  const user = getUser();

  const {
    list: items,
    isError,
    isLoading,
    errorMessage,
  } = useItems(apiStatus, setApiStatus);

  if (isLoading) {
    return (
      <Box component="span" m={1}>
        <CircularProgress />
      </Box>
    );
  }

  const isEmptyList = !items || items.length == 0;

  return (
    <>
      <Banner apiStatus={apiStatus} setApiStatus={setApiStatus} />
      <Stack sx={{ width: "100%", mb: 1 }} spacing={2}>
        {errorMessage && (
          <Alert severity="error">{errorMessage}</Alert>
        )}
      </Stack>
      <ListHeader
        handleClickFormModalOpen={handleClickFormModalOpen}
        isEmpty={isEmptyList}
        text={'AddressBook'}
      />
      <TableItems
        items={items}
        onEditClick={setFormModalopen}
        onDeleteClick={setDeleteModalopen}
        isEmpty={isEmptyList}
      />
      <AddModal
        open={formModalopen.open}
        setOpen={setFormModalopen}
        isEdit={isEdit}
        setApiStatus={setApiStatus}
      />
      <EditModal
        userItem={{ ...formModalopen.selectedItem }}
        open={formModalopen.open}
        setOpen={setFormModalopen}
        isEdit={isEdit}
        setApiStatus={setApiStatus}
      />
      <DeleteModal
        userItem={{ ...deleteModalopen.selectedItem }}
        open={deleteModalopen.open}
        setOpen={setDeleteModalopen}
        setApiStatus={setApiStatus}
      />
    </>
  );
};

export default List;