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";
import { useSearchParams } from "react-router-dom";
import { updatePartAanomolyData } from "../redux/actions/actions";
import {
  useSelector,
  useDispatch,
  ReactReduxContext,
  batch,
} from "react-redux";
import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
import SystemNumberDialog from "./SystemNumberDialog";
import FormControl from "@mui/material/FormControl";
import Select, { selectClasses } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

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

const PartAReassigned = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [anomolyData, setAnomolyData] = useState([]);
  const [tableRowData, setTableRowData] = useState([]);
  const [selectedDegreeType, setSelectedDegreeType] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  let [searchParams, setSearchParams] = useSearchParams();

  const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);
  const searchParamsType = searchParams.get("type");
  const dispatch = useDispatch();
  const reduxPartA2023AnomolyData = useSelector(
    (state) => state?.partABatchAnomolyData
  );
  const reduxSystemNo = useSelector((state) => state?.systemNumber);
  console.log("Redux partA 2023 anomoly data : ", reduxPartA2023AnomolyData);
  const degreeTypes = [
    { type: "NON VOCATIONAL", type_code: "0" },
    { type: "VOCATIONAL", type_code: "6" },
  ];

  const handleDegreeTypeChange = (e) => {
    const newDegreeType = e.target.value;
    console.log("Value ===== ", newDegreeType);
    setSelectedDegreeType(newDegreeType);
    // dispatch(updatePartCDegreeType(newDegreeType));
  };

  useEffect(() => {
    if (!selectedDegreeType) {
      setSelectedDegreeType("0");
    }
  }, []);

  useEffect(() => {
    console.log("Selected degree type in use Effect === ", selectedDegreeType);
  }, [selectedDegreeType]);

  useEffect(() => {
    if (!reduxSystemNo) {
      setShowSystemNoContainer(true);
    } else {
      let localstorageRecords;
      // if (searchParamsType === "old") {
      //   localstorageRecords = localStorage.getItem("part-a-old-anomoly");
      //   if (localstorageRecords) {
      //     localstorageRecords = JSON.parse(localstorageRecords);
      //   }
      // } else if (searchParamsType !== "old") {
      //   localstorageRecords = localStorage.getItem("part-a-anomoly");
      //   if (localstorageRecords) {
      //     localstorageRecords = JSON.parse(localstorageRecords);
      //   }
      // }
      if (selectedDegreeType) {
        fetchAnomalyData(reduxSystemNo);
      }

      // if (localstorageRecords && localstorageRecords.length > 0) {
      //   console.log(
      //     "Length of local storage records is high so aborting fetching ..."
      //   );
      //   console.log("The local storage records are ... ", localstorageRecords);
      //   setAnomolyData(localstorageRecords);
      //   dispatch(updatePartAanomolyData(localstorageRecords));
      //   const tmpData = [];
      //   for (const data of localstorageRecords) {
      //     tmpData.push(
      //       createData(
      //         data.s3_path,
      //         data.barcode,
      //         data.register_number,
      //         data.subject_code,
      //         data.type,
      //         reduxSystemNo
      //       )
      //     );
      //   }
      //   // console.log("Tmp data is : ", tmpData);
      //   if (tmpData.length > 0) {
      //     setTableRowData(tmpData);
      //   }
      // } else {
      //   fetchAnomalyData(reduxSystemNo);
      // }

      // if(searchParamsType==="old"){
      //   const sytemData = localStorage.get("part-a-anomoly")
      // }else if(searchParamsType !== "old"){
      //   const sytemData = localStorage.get("part-a-old-anomoly")
      // }
    }
  }, [reduxSystemNo, selectedDegreeType]);

  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(
    s3_path,
    barcode,
    register_number,
    subject_code,
    type,
    systemNo
  ) {
    return {
      s3_path,
      barcode,
      register_number,
      subject_code,
      type,
      systemNo,
    };
  }

  const updateSystemReservationStatus = async (systemRecords) => {
    const payload = {
      systemRecords,
      sysNo: reduxSystemNo,
    };
    try {
      fetch(
        `${
          import.meta.env.VITE_REACT_APP_BACKEND_URL
        }/updateSystemReservationStatus`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      )
        .then((response) => response.json())
        .then((responseData) => {
          console.log("response from updation : ", responseData);
        });
    } catch (error) {
      throw new Error("Error in update system records : ", systemRecords);
    }
  };

  const fetchAnomalyData = (reduxSystemNo) => {
    console.log("Fetching.......");
    setIsLoading(true);
    fetch(
      `${
        import.meta.env.VITE_REACT_APP_BACKEND_URL
      }/fetchAnamolyPartAData?type=${searchParamsType}&sysNo=${reduxSystemNo}&degreeType=${selectedDegreeType}`,
      {
        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") {
          console.log("System record ====== ", responseData.systemRecord);
          var systemRecords = responseData?.data;
          if (!responseData.systemRecord) {
            systemRecords = getRecordsBySystemId(
              responseData?.data,
              reduxSystemNo
            );
          }
          //updateSystemReservationStatus(systemRecords);
          console.log("System records : ", systemRecords);
          if (searchParamsType === "old") {
            localStorage.setItem(
              "part-a-old-anomoly",
              JSON.stringify(systemRecords)
            );
          } else if (searchParamsType !== "old") {
            localStorage.setItem(
              "part-a-anomoly",
              JSON.stringify(systemRecords)
            );
          }
          setAnomolyData(systemRecords);
          dispatch(updatePartAanomolyData(systemRecords));
          const tmpData = [];
          for (const data of systemRecords) {
            tmpData.push(
              createData(
                data.s3_path,
                data.barcode,
                data.register_number,
                data.subject_code,
                data.type,
                reduxSystemNo
              )
            );
          }
          // console.log("Tmp data is : ", tmpData);
          if (tmpData.length > 0) {
            setTableRowData(tmpData);
          }
        }
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setIsLoading(false);
      });
  };

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

  function getRecordsBySystemId(records, systemId) {
    const new_data = [];
    for (var i = 0; i < records.length; i++) {
      var count = i % 5;
      if (count === systemId - 1) {
        new_data.push(records[i]);
      }
    }
    return new_data;
  }

  const handleSystemNoChange = () => {
    console.log("System No Change is called");
    setShowSystemNoContainer(true);
  };

  useEffect(() => {
    console.log("System no container show status : ", showSystemNoContainer);
  }, [showSystemNoContainer]);

  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> */}
              <Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
                {reduxSystemNo && (
                  <Box
                    className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3"
                    style={{ cursor: "pointer" }}
                    onClick={handleSystemNoChange}
                  >
                    <b>System No : </b> {reduxSystemNo}
                  </Box>
                )}
                <Button
                  className="bg-primary p-1 text-light rounded h-100"
                  onClick={() => {
                    navigate("/");
                  }}
                >
                  <HomeIcon />
                </Button>
              </Box>
            </Box>
          </Box>
        </Header>
        <Content
          style={{
            margin: "16px 16px",
          }}
        >
          <Box className="w-25 text-left">
            <h6>Degree Type</h6>
            <FormControl fullWidth>
              <Select
                className="bg-white"
                value={selectedDegreeType}
                onChange={handleDegreeTypeChange}
              >
                {degreeTypes.map((degree) => (
                  <MenuItem key={degree.type_code} value={degree.type_code}>
                    {degree.type}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Box>
          <Box className="w-100 d-flex justify-content-between">
            <Box className="w-100 d-flex justify-content-center">
              {tableRowData.length > 0 && (
                <TableComponent
                  batchType={searchParamsType}
                  rows={tableRowData}
                  type={"PartAReassigned"}
                />
              )}
              {tableRowData.length == 0 && (
                <Box className="w-100 d-flex justify-content-center py-2 align-items-center text-center">
                  <h6>No Data Found !!</h6>
                </Box>
              )}
            </Box>
          </Box>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          exampaper.vidh.ai ©{new Date().getFullYear()}
        </Footer>
      </Layout>
      {isLoading && <LoadingContainer loadingText={"Loading"} />}
      {showSystemNoContainer && (
        <SystemNumberDialog
          setShowSystemNoContainer={setShowSystemNoContainer}
          showSystemNoContainer={showSystemNoContainer}
        />
      )}
    </Layout>
  );
};
export default PartAReassigned;