import Box from "@mui/material/Box";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import React, { FC, useState } from "react";

type InstructionsBlockProps = {
  headerText: string;
  subHeaderText: string;
  instructionTitle: string;
  instructionsText: JSX.Element;
};

export const InstructionsBlock: FC<InstructionsBlockProps> = ({
  headerText,
  instructionsText,
  subHeaderText,
  instructionTitle,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const [isInstructionOpen, setIsInstructionOpen] = useState(false);
  return (
    <Box>
      <Box
        onClick={() => setIsInstructionOpen(!isInstructionOpen)}
        sx={{
          cursor: "pointer",
          backgroundColor: theme.palette.background.default,
          borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px",
          padding: "20px",
          border: "1px solid #E5E5E5",
          borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5",
          position: "relative",
        }}
      >
        {isMobile && (
          <KeyboardArrowUpIcon
            fontSize="medium"
            sx={{
              position: "absolute",
              top: "20px",
              right: "20px",
              transition: "transform 0.3s",
              transform: isInstructionOpen ? "rotate(0deg" : "rotate(180deg)",
            }}
          />
        )}
        <Typography
          sx={{
            marginBottom: "4px",
            fontWeight: "500",
            width: isMobile ? "90%" : "100%",
          }}
        >
          {headerText}
        </Typography>
        <Typography sx={{ fontSize: "16px", color: theme.palette.grey2.main }}>
          {subHeaderText}
        </Typography>
      </Box>
      {isInstructionOpen && (
        <Box
          sx={{
            borderRadius: " 0 0 12px 12px",
            padding: "20px",
            border: "1px solid #E5E5E5",
            borderTop: isInstructionOpen ? "none" : "1px solid #E5E5E5",
            maxHeight: isMobile ? "240px" : "300px",
            overflowY: "auto",
          }}
        >
          <Typography
            sx={{
              fontWeight: "500",
              color: theme.palette.grey3.main,
              marginBottom: "15px",
            }}
          >
            {instructionTitle}
          </Typography>
          {instructionsText}
        </Box>
      )}
    </Box>
  );
};
