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 { updateAttendenceAnomolyData } from "../redux/actions/actions";
import { useDispatch, useSelector } from "react-redux";

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 AnomolyReassigned = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [anomolyData, setAnomolyData] = useState([]);
  const [filteredAnomolyData,setFilterAnomolyData] = useState([])
  const [tableRowData, setTableRowData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [distinctExamCentreCodes,setDistinctExamCentreCodes] = useState([])
  const dispatch = useDispatch();
  const reduxAnomolyData = useSelector((state) => state.attendenceAnomolyData);
  const [filterSelectedExamCentreCode,setFilterSelectedExamCentreCode] = useState("")

  // Log Redux store state
  console.log("Redux store state after dispatch:", reduxAnomolyData);

  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(
    attendence_serial_no,
    student_slno,
    exam_centre_code,
    exam_centre,
    student_name,
    register_number,
    reassigned_serial_no
  ) {
    return {
      attendence_serial_no,
      student_slno,
      exam_centre_code,
      exam_centre,
      student_name,
      register_number,
      reassigned_serial_no,
    };
  }

  useEffect(()=>{
    const tmpData = [];
    for (const data of anomolyData) {
      tmpData.push(
        createData(
          data.attendence_serial_no,
          data.student_slno,
          data.exam_centre_code,
          data.exam_centre,
          data.student_name,
          data.register_number,
          data.reassigned_serial_no
        )
      );
    }
    console.log("Tmp data is : ", tmpData);
    if (tmpData.length > 0) {
      setTableRowData(tmpData);
    }
  },[anomolyData])

  const fetchAnomalyData = () => {
    console.log("Fetching.......");
    setIsLoading(true);
    fetch(
      `${
        import.meta.env.VITE_REACT_APP_BACKEND_URL
      }/fetchAnamolyAttendenceData`,
      {
        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 tmpExamCentreCodes = [];
          const distinctExamCentreCodesSet = new Set(distinctExamCentreCodes);
          
          for (var data of responseData?.data) {
            if (!distinctExamCentreCodesSet.has(data.exam_centre_code)) {
              distinctExamCentreCodesSet.add(data.exam_centre_code);
              tmpExamCentreCodes.push(data.exam_centre_code);
            }
            setFilterAnomolyData([...tmpExamCentreCodes])
          }
          
          
          setDistinctExamCentreCodes([...distinctExamCentreCodesSet]);
          console.log("Tmp exam centre code: ", tmpExamCentreCodes);

          // console.log("Data to be stored in store : ", responseData?.data);
          dispatch(updateAttendenceAnomolyData(responseData?.data));
        }
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setIsLoading(false);
      });
  };

  useEffect(() => {
    if (reduxAnomolyData.length > 0) {
      console.log("Redux anomoly data found")
      setAnomolyData(reduxAnomolyData)
    } else {
      console.log("Redux anomoly data not found")
      fetchAnomalyData();
    }
  }, []);


  useEffect(()=>{
   const tmpData = []
   for(var data in anomolyData){
    if(data?.exam_centre_code == filterSelectedExamCentreCode){
      tmpData.push(data)
    }
   }

  },[filterSelectedExamCentreCode])



  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
                  filterSelectedExamCentreCode = {filterSelectedExamCentreCode}
                  setFilterSelectedExamCentreCode = {setFilterSelectedExamCentreCode}
                  rows={tableRowData}
                  type={"AnomolyReassigned"}
                  distinctExamCentreCodes = {distinctExamCentreCodes}
                />
              )}
                {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"} />}
    </Layout>
  );
};
export default AnomolyReassigned;