import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { EquipmentsAPI } from "../../Components/API/API";
import { CircularProgress } from "@mui/material";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { colors } from "../../styles";
import EditSKUModal from "../../Components/EditSKUModal/EditSKUModal";
import Popup from "reactjs-popup";
import { useState } from "react";

export default function EquipmentListPage() {
  const [editmodalOpen, SetEditModalOpen] = useState(false);
  const [selectedItem, SetSelectedItem] = useState(0);
  const equipments = useQuery({
    queryKey: ["equipments"],
    queryFn: EquipmentsAPI,
  });
  if (equipments.isLoading) {
    return (
      <div style={styles.background}>
        <Header label={"Dashboard"} />
        <div
          style={{
            ...styles.flex_column,
            ...{
              alignItems: "center",
              justifyContent: "center",
              paddingTop: "64px",
            },
          }}
        >
          <CircularProgress style={{ height: "128px", width: "128px" }} />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            Loading
          </p>
        </div>
      </div>
    );
  }
  return (
    <div style={styles.background}>
      <Header label={"SKU List"} />
      <div
        style={{
          ...styles.flex_column,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
          width: "100%",
          minHeight: "100%",
          minWidth: "100%",
          flexWrap: "wrap",
        }}
      >
        <TableContainer
          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
          component={Paper}
        >
          <Table sx={{ minWidth: "32rem" }} size="medium">
            <TableHead>
              <TableRow style={{ backgroundColor: colors.header_color }}>
                <TableCell style={styles.text_light}>ID</TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Name
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Description
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Category
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Last Modified
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {equipments.data ? (
                equipments.data.map((equipment) => (
                  <TableRow
                    key={equipment.id}
                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                    onClick={() => {
                      SetSelectedItem(equipment.id);
                      SetEditModalOpen(true);
                    }}
                  >
                    <TableCell align="center" component="th" scope="row">
                      {equipment.id}
                    </TableCell>
                    <TableCell align="center" component="th" scope="row">
                      {equipment.name}
                    </TableCell>

                    <TableCell align="center" component="th" scope="row">
                      {equipment.description}
                    </TableCell>
                    <TableCell align="center" component="th" scope="row">
                      {equipment.category}
                    </TableCell>
                    <TableCell align="right">
                      <div
                        style={{
                          ...styles.flex_column,
                          ...{ alignItems: "center" },
                        }}
                      >
                        <div>{equipment.last_updated}</div>
                        <div>
                          {equipment.last_updated_by
                            ? "by " + equipment.last_updated_by
                            : ""}
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <></>
              )}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
      <Popup
        open={editmodalOpen}
        onClose={() => SetEditModalOpen(false)}
        modal
        position={"top center"}
        contentStyle={styles.popup_center}
      >
        <EditSKUModal id={selectedItem} setOpen={SetEditModalOpen} />
      </Popup>
    </div>
  );
}