import * as React from "react";
import {
  Card,
  CardHeader,
  CardContent,
  SxProps,
  Theme,
  Grid,
} from "@mui/material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { darken, lighten, styled } from "@mui/material/styles";
import { PROJECT_CARD_STYLE } from "@/theme/colorConst";
import { useRef, useEffect, useState } from "react";
import Swal from "sweetalert2";
import styledcmp from "styled-components";

const CardWrapper = styledcmp.div`
  /* Styles for the card when not hovered */
  background-color: #f0f0f0;
  padding: 10px;
  /* ...other styles... */

  &:hover {
    /* Styles for the card when hovered */
    background-color: #c0c0c0;
    /* ...other hover styles... */
  }
`;

interface CustomCardGridProps {
  Title?: string;
  cardsPerRow?: number;
  rows?: any[];
  columns?: any[];
  items: any[];
  columnWidth?: number;
  Style?: boolean;
  sx?: SxProps<Theme>;
  dataGridHeight?: number;
  cardStyle?: any;
  [key: string]: any;
}

const CustomCardGrid: React.FC<CustomCardGridProps> = ({
  Title,
  rows,
  items,
  columns,
  columnWidth,
  cardsPerRow = 4,
  Style = true,
  sx,
  dataGridHeight,
  ...props
}) => {
  const getBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.7) : lighten(color, 0.7);

  const getHoverBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.6) : lighten(color, 0.6);

  const getSelectedBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.5) : lighten(color, 0.5);

  const getSelectedHoverBackgroundColor = (
    color: string,
    mode: "light" | "dark",
  ) => (mode === "dark" ? darken(color, 0.4) : lighten(color, 0.4));

  const StyledCard = styled(Card)(({ theme }) => ({
    "& .super-app-theme--Open": {
      backgroundColor: getBackgroundColor(
        theme.palette.info.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.info.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.info.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.info.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--finish": {
      backgroundColor: getBackgroundColor(
        theme.palette.success.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.success.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.success.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.success.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--danger": {
      backgroundColor: getBackgroundColor(
        theme.palette.warning.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.warning.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.warning.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.warning.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--warning": {
      backgroundColor: getBackgroundColor(
        theme.palette.error.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.error.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.error.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.error.main,
            theme.palette.mode,
          ),
        },
      },
    },
  }));

  const CardItem = (item: any) => {
    const cardItem = item.item as Record<string, string>;
    return (
      props.cardStyle ?? (
        // <Grid item sx={{ m: 3 }}>
        <StyledCard style={PROJECT_CARD_STYLE}>
          <CardContent>
            {Object.keys(cardItem).map((key) => (
              <p key={key}>
                {key}: {cardItem[key]}
              </p>
            ))}
          </CardContent>
        </StyledCard>
        // </Grid>
      )
    );
  };

  const containerRef = useRef<HTMLDivElement>(null!);

  const [cardMargin, setCardMargin] = useState(1.5);

  useEffect(() => {
    console.log(CardItem);
    const resizeHandler = () => {
      const containerWidth = containerRef.current.offsetWidth;
      const cardCount = items.length;
      const rootSize = parseFloat(
        getComputedStyle(document.documentElement).fontSize,
      );
      setCardMargin(
        (containerWidth -
          cardsPerRow *
            (rootSize * parseInt(PROJECT_CARD_STYLE.width.slice(0, -3), 10))) /
          (2 * cardsPerRow),
      );
      // Set the cardMargin value using   style={{margin: `${cardMargin}px`, ...PROJECT_CARD_STYLE}}
    };

    window.addEventListener("resize", resizeHandler);

    resizeHandler(); // Initial calculation

    // Swal.fire({
    //   title: 'Error! ',
    //   text: `Card Count is ${items.length}`,
    //   icon: 'success',
    //   confirmButtonText: 'Jus Cool'
    // })

    return () => {
      window.removeEventListener("resize", resizeHandler);
    };
  }, [items]);

  return (
    <div
      ref={containerRef}
      style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-start" }}
    >
      {/* <p>width is {containerRef.current == null? "idk":containerRef.current.offsetWidth}, margin is {cardMargin}</p> */}
      {items.map((item, index) => (
        <div key={index}>
          {props.cardStyle ? props.cardStyle(item) : <CardItem item={item} />}
        </div>
      ))}
    </div>
  );
};

export default CustomCardGrid;
