import React, { useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
import BookletInput from "./BookletInput";
import { Box, Button } from "@mui/material";
import { useEffect } from "react";
import TextField from "@mui/material/TextField";
import EditButton from "./EditButton";
import { width } from "@mui/system";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { TablePagination } from "@mui/base/TablePagination";
import TableComponent from "./TableComponent";
import LoadingContainer from "./LoadingContainer";
import HomeIcon from "@mui/icons-material/Home";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useNavigate } from "react-router-dom";
import QueryStatsIcon from "@mui/icons-material/QueryStats";

const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
// const items = [
//   getItem('Option 1', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

const items = [getItem("Reassigned Booklet No", "1", <PieChartOutlined />)];

const PartAReassigned = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [anomolyData, setAnomolyData] = useState([]);
  const [tableRowData, setTableRowData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    if (windowWidth < 800) {
      setCollapsed(true);
    }
    if (windowWidth > 800) {
      setCollapsed(false);
    }
  }, [windowWidth]);

  const navigate = useNavigate();
  function createData(barcode,register_number,subject_code,type) {
    return {
        barcode,register_number,subject_code,type
    };
  }

  const fetchAnomalyData = () => {
    console.log("Fetching.......");
    setIsLoading(true);
    fetch(
      `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchAnamolyPartAData`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
      .then((response) => {
        console.log("Response fetched..");
        return response.json();
      })
      .then((responseData) => {
        console.log("Response Data is : ", responseData);
        setIsLoading(false);
        if (responseData.status === "success") {
          setAnomolyData(responseData.data);
          const tmpData = [];
          for (const data of responseData.data) {
            tmpData.push(createData(data.barcode,data.register_number,data.subject_code,data.type));
          }
          console.log("Tmp data is : ", tmpData);
          if (tmpData.length > 0) {
            setTableRowData(tmpData);
          }
        }
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setIsLoading(false);
      });
  };

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

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
    >
      <ToastContainer />
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Box className="d-flex justify-content-between h-100 py-1 px-2">
            <Button
              className="bg-primary p-1 text-light"
              onClick={() => {
                navigate(-1);
              }}
            >
              <ArrowBackIcon />
            </Button>
            <Box className="d-flex justify-content-between gap-2">
              {/* <Button
                className="bg-primary p-1 text-light"
                onClick={() => {
                  navigate("/anomoly/reassigned/stats");
                }}
              >
                <QueryStatsIcon />
              </Button> */}
              <Button
                className="bg-primary p-1 text-light"
                onClick={() => {
                  navigate("/");
                }}
              >
                <HomeIcon />
              </Button>
            </Box>
          </Box>
        </Header>
        <Content
          style={{
            margin: "16px 16px",
          }}
        >
          <Box className="w-100 d-flex justify-content-between">
            <Box className="w-100 d-flex justify-content-center">
              {tableRowData.length > 0 && (
                <TableComponent
                  rows={tableRowData}
                  type={"PartAReassigned"}
                />
              )}
            </Box>
          </Box>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          exampaper.vidh.ai ©{new Date().getFullYear()}
        </Footer>
      </Layout>
      {isLoading && <LoadingContainer loadingText={"Loading"} />}
    </Layout>
  );
};
export default PartAReassigned;
