import Box from "@mui/material/Box";
import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import GearIcon from "@icons/GearIcon";
import React, { FC, useCallback, useMemo } from "react";
import AccountSetting from "@icons/AccountSetting";

type AmoModalTitleProps = {
  step: number;
  title: string;
  desc: string;
  toSettings: () => void;
};

export const ModalTitle: FC<AmoModalTitleProps> = ({
  step,
  title,
  desc,
  toSettings,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
      <Box>
        <Typography
          sx={{
            fontSize: isMobile ? "18px" : "24px",
            color: theme.palette.grey3.main,
            fontWeight: "500",
            lineHeight: "1",
          }}
        >
          {title}
        </Typography>
        {
          desc &&
          <Typography
            sx={{
              color: "#4D4D4D",
              fontSize: "16px",
              m: "5px 0 15px 0",
              whiteSpace: "break-spaces",
              width: "90%"
            }}
          >
            {desc}
          </Typography>
        }
        <Typography
          sx={{
            color: theme.palette.grey2.main,
            fontWeight: "400",
            marginTop: "4px",
            fontSize: "14px",
            lineHeight: "1",
          }}
        >
          {step} шаг
        </Typography>
      </Box>


      <Box>
        <Button
          variant="outlined"
          startIcon={
            <GearIcon
              color={theme.palette.brightPurple.main}
              height={"24px"}
              width={"24px"}
            />
          }
          onClick={toSettings}
          sx={{
            height: "44px",
            padding: "0",
            width: isMobile ? "44px" : "205px",
            minWidth: isMobile ? "44px" : "auto",
            backgroundColor: "transparent",
            color: theme.palette.brightPurple.main,
            "& .MuiButton-startIcon": {
              marginRight: isMobile ? 0 : "8px",
              marginLeft: 0,
            },
            "&:hover": {
              backgroundColor: theme.palette.brightPurple.main,
              color: theme.palette.common.white,
              "& path": {
                stroke: theme.palette.common.white,
              },
              "& circle": {
                stroke: theme.palette.common.white,
              },
            },
            "&:active": {
              backgroundColor: "#581CA7",
              color: theme.palette.common.white,
              "& path": {
                stroke: theme.palette.common.white,
              },
              "& circle": {
                stroke: theme.palette.common.white,
              },
            },
          }}
        >
          {isMobile ? "" : "Мои настройки"}
        </Button>
      </Box>
    </Box>
  );
};
