import { CircularProgress, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import { Grid } from "../grid/Grid";

const customStyles = {
  rows: {
    style: {
      minHeight: "72px", // override the row height
    },
  },
  headCells: {
    style: {
      paddingLeft: "0px", // override the cell padding for head cells
      paddingRight: "0px",
      backgroundColor: "#ddd",
    },
  },
  cells: {
    style: {
      paddingLeft: "0px", // override the cell padding for data cells
      paddingRight: "0px",
    },
  },
};

export const PageTable = (props) => {
  const titleJsx = props.title;

  useEffect(() => {
    if (!props.progressPending) {
      const spanElement = document.querySelector(".rdt_Pagination span");

      const pagination = document.querySelector(".rdt_Pagination");
      const lastSpan =
        pagination?.querySelectorAll("span")[
          pagination?.querySelectorAll("span").length - 1
        ];

      if (lastSpan) {
        lastSpan.textContent = lastSpan.textContent.replace("of", "از");
        spanElement.textContent = "سطر در صفحه:";
      }
    }
  }, [props.progressPending]);

  const [zoomLevel, setZoomLevel] = useState(window.devicePixelRatio);

  const handleZoomChange = () => {
    const newZoomLevel = window.devicePixelRatio;
    setZoomLevel(newZoomLevel);
  };

  useEffect(() => {
    window.addEventListener("resize", handleZoomChange);
    return () => {
      window.removeEventListener("resize", handleZoomChange);
    };
  }, [zoomLevel]);

  useEffect(() => {
    const divElements = document.querySelectorAll(".rdt_Table");

    // Text to search for and replace
    const searchText = "There are no records to display";
    const replacementText = "داده ای جهت نمایش وجود ندارد";
    divElements?.forEach((div) => {
      // Get the text content of the div
      const content = div?.textContent;
      if (content.includes(searchText)) {
        // Replace the search text with replacement text
        // const updatedContent = content.replace(
        //   new RegExp(searchText, "g"),
        //   replacementText
        // );

        // // Update the content of the div
        div.textContent = replacementText;
      }
    });
  }, []);

  const isMobile = window.innerWidth <= 600;

  return (
    <Grid
      container
      className="page-table"
      direction="column"
      alignItems="center"
      // justifyContent="center"
    >
      <Grid container alignItems="start" justifyContent="start">
        {titleJsx}
      </Grid>
      {Boolean(props?.data?.length) && (
        <Grid
          className="table-section"
          width={
            isMobile
              ? "95vw"
              : zoomLevel >= 1
              ? window.screen.width - 200
              : window.screen.width * (10 / (zoomLevel * 10)) - 250
          }
        >
          <DataTable
            progressComponent={null}
            customStyles={customStyles}
            {...props}
            title={null}
            pagination
            paginationRowsPerPageOptions={[10, 20, 50, 100]} // Define custom options
            fixedHeader
            fixedHeaderScrollHeight="70vh"
          />
        </Grid>
      )}
      {!props?.data?.length && !props.progressPending && (
        <Typography variant="h6" my={1} color="red" mt={4}>
          داده ای جهت نمایش وجود ندارد!
        </Typography>
      )}
      {props.progressPending && (
        <CircularProgress
          style={{ alignItems: "center", justifyContent: "center" }}
        />
      )}
    </Grid>
  );
};
