import React, { useEffect, useState } from "react";
import { Box, Button} from "@mui/material"
import { ToastContainer } from "react-toastify";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import HomeIcon from "@mui/icons-material/Home";

import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
import { useNavigate } from "react-router-dom";
import TableComponent from "./TableComponent";
import { useDispatch, useSelector } from "react-redux";
import TableComponentAdditionalSheet from "./TableComponentAdditionalSheet";
const { Header, Content, Footer, Sider } = Layout;

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


    function createData(
        image_name,
        s3_image_path
      ) {
        return {
          image_name,
          s3_image_path
        };
      }
      

    useEffect(()=>{
        const tmpData = [];
        for (const data of anomolyData) {
          tmpData.push(
            createData(
                data.image_name,
                data.s3_image_path
            //   data.attendence_serial_no,
            //   data.answer_booklet_sno,
            //   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
          }/fetchAnamolyAttendenceAdditionalSheetData`,
          {
            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();

  const navigate = useNavigate()

  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
    >
      <ToastContainer />
      <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("/");
                }}
              >
                <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={"AdditionalSheet"}
                    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>


      </Layout>
    </Layout>
  );
}

export default AttendanceAdditionalSheet;