import * as React from "react";
import Box from "@mui/material/Box";
import Collapse, { CollapseProps } from "@mui/material/Collapse";
import Button from "@mui/material/Button";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

export default function CustomCollapse(
  props: {
    defaultCollapse?: boolean;
    handleChange?: () => void;
    hideButton?: boolean;
  } & CollapseProps
) {
  const {
    defaultCollapse,
    handleChange: onChange,
    hideButton,
    in: controlledIn,
    children,
    sx,
    ...rest
  } = props;

  const [checked, setChecked] = React.useState(!!defaultCollapse);

  const handleChange =
    onChange ||
    (() => {
      setChecked((prev) => !prev);
    });

  const isChecked = onChange !== undefined ? controlledIn : checked;

  React.useEffect(() => {
    const eventHandler = (type: "checked" | "unchecked") => () => {
      setChecked(false);
    };
    window.addEventListener("CustomCollapseClose", eventHandler("unchecked"));
    window.addEventListener("CustomCollapseOpen", eventHandler("checked"));

    return () => {
      window.removeEventListener(
        "CustomCollapseClose",
        eventHandler("unchecked")
      );
      window.removeEventListener("CustomCollapseOpen", eventHandler("checked"));
    };
  }, []);

  return (
    <Box position="relative">
      <Collapse
        in={isChecked}
        sx={{
          ...(!isChecked && {
            maskImage:
              "linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))",
          }),
          ...sx,
        }}
        {...rest}
      >
        {children}
      </Collapse>
      {!hideButton && (
        <Button
          size="small"
          onClick={handleChange}
          disableRipple
          startIcon={!isChecked ? <ExpandMoreIcon /> : <ExpandLessIcon />}
          sx={{
            position: "absolute",
            bottom: "0",
            left: "0",
            right: "0",
          }}
        >
          {!isChecked ? "Show more" : "Hide"}
        </Button>
      )}
    </Box>
  );
}