import React, { useState, useRef, useEffect } from "react";
import Grid2 from "@mui/material/Unstable_Grid2";
import PropTypes from "prop-types";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

const ToggleButton = styled(Button)({
  position: "absolute",
  opacity: "50%",
  bottom: 0,
  right: 0,
  transform: "translateX(-50%)",
  minWidth: "auto",
  padding: "2px 8px",
  backgroundColor: "white",
  border: "1px solid #B0B0B0",
  borderRadius: "10px 10px 0 0",
  "&:hover": {
    backgroundColor: "#f5f5f5",
  },
  zIndex: 100,
});

const StyledGrid = styled(Grid2, {
  shouldForwardProp: (prop) =>
    !["isDashboard", "isPolicy", "isLocked", "isExpanded"].includes(prop),
})(
  ({
    theme,
    isDashboard = false,
    isPolicy = false,
    isLocked = false,
    isExpanded = false,
  }) => ({
    ...(isDashboard
      ? {
          position: "relative",
          overflow: "hidden",
          "&::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            pointerEvents: "none",
            zIndex: -1,
          },
          padding: theme.spacing(2),
          background: theme.palette.background.paper,
          boxShadow: "rgba(100, 100, 111, 0.2) 2px 6px 6px 2px",
          borderRadius: "2px 2px 10px 10px",
          zIndex: 0,
        }
      : isPolicy && {
          padding: "10px",
          color: "#727272",
          border: "1px solid #B0B0B0",
          borderRadius: "8px",
          width: "270px",
          background: isLocked ? "#EAEFFF" : "white",
          height: isExpanded ? "auto" : "100px",
          overflow: isExpanded ? "unset" : "hidden",
          position: "relative",
          "&:hover": {
            backgroundColor: isLocked ? "#EAEFFF" : "#f5f5f5",
          },
        }),
  })
);

export const Grid = (props) => {
  const {
    children,
    isDashboard = false,
    isPolicy = false,
    isLocked = false,
    ...rest
  } = props;

  const [isExpanded, setIsExpanded] = useState(false);
  const [showToggle, setShowToggle] = useState(false);
  const [isFirstRender, setIsFirstRender] = useState(true);
  const contentRef = useRef(null);

  useEffect(() => {
    if (isPolicy && contentRef.current) {
      const contentHeight = contentRef.current.scrollHeight;
      setShowToggle(contentHeight > 120);
    }
  }, [children, isPolicy]);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFirstRender(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (!contentRef.current) return;

    const contentHeight = contentRef.current.scrollHeight;

    if (contentHeight > 120) {
      if (!isFirstRender) {
        setIsExpanded(true);
      }
    } else {
      setIsExpanded(false);
    }
  }, [children, isFirstRender]);

  const toggleExpand = () => {
    setIsExpanded((prev) => !prev);
  };

  return (
    <StyledGrid
      ref={contentRef}
      isDashboard={isDashboard}
      isPolicy={isPolicy}
      isLocked={isLocked}
      isExpanded={isExpanded}
      {...rest}
    >
      {children}

      {isPolicy && showToggle && (
        <ToggleButton onClick={toggleExpand}>
          {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ToggleButton>
      )}
    </StyledGrid>
  );
};

Grid.propTypes = {
  children: PropTypes.any,
  isDashboard: PropTypes.bool,
  isPolicy: PropTypes.bool,
  isLocked: PropTypes.bool,
};
