import React, { useState } from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { Pagination } from "@mui/material";
import { SPACING } from "../../data/spacing";
import { Grid } from "../grid/Grid";

const BoxList = ({ columns, data, ignore, paginated, name }) => {
  const itemsPerPage = 2;
  const totalPages = Math.ceil(data?.length / itemsPerPage);
  const [currentPage, setCurrentPage] = useState(1);

  function isInIgnoreList(number) {
    return ignore?.includes(number);
  }

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  const slicedData = paginated ? data.slice(startIndex, endIndex) : data;

  return (
    <>
      <Grid
        container
        xs={12}
        mb={SPACING.SMALL}
        spacing={1}
        justifyContent="space-between"
      >
        {name && (
          <Typography m={2} xs={12} variant="body2">
            {name}
          </Typography>
        )}
        {!data.length && (
          <Grid xs={12} display="grid" justifyContent="center" mt={4}>
            <Typography xs={12} variant="body1" color="error">
              موردی وجود ندارد!
            </Typography>
          </Grid>
        )}

        {slicedData.map((row, rowIndex) => {
          let visibleCellIndex = 0;

          return (
            <Grid key={rowIndex} xs={data.length === 1 ? 12 : 6}>
              <Box
                display="flex"
                flexDirection="column"
                border={1}
                borderRadius={3}
              >
                {row.map(
                  (cell, cellIndex) =>
                    !isInIgnoreList(cellIndex) && (
                      <Grid
                        key={cellIndex}
                        alignItems="center"
                        justifyContent="space-between"
                        display="flex"
                        xs={12}
                        sx={{
                          backgroundColor:
                            visibleCellIndex++ % 2 === 0
                              ? "rgba(148,148,148,0.1)"
                              : "ffff",
                        }}
                      >
                        <Grid item xs={5}>
                          <Typography
                            sx={{
                              fontSize:
                                columns[cellIndex]?.length <= 15 ? 13 : 10,
                            }}
                          >{`${columns[cellIndex]}`}</Typography>
                        </Grid>

                        <Grid
                          item
                          xs={7}
                          style={{ fontSize: 12, width: "100%" }}
                        >
                          {cell}
                        </Grid>
                      </Grid>
                    )
                )}
              </Box>
            </Grid>
          );
        })}
      </Grid>

      {paginated && (
        <Grid container mb={SPACING.SMALL} justifyContent="center">
          <Pagination
            count={totalPages}
            page={currentPage}
            variant="outlined"
            onChange={(event, page) => setCurrentPage(page)}
          />
        </Grid>
      )}
    </>
  );
};

BoxList.propTypes = {
  columns: PropTypes.any,
  data: PropTypes.any,
  ignore: PropTypes.array,
  paginated: PropTypes.any,
};

export default BoxList;
