import { FC } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../StepButtonsBlock";
import { SettingItem } from "./SettingItem/SettingItem";
import { SelectedQuestions, SelectedTags } from "../types";

type AmoSettingsBlockProps = {
  stepTitles: string[];
  selectedFunnel: string | null;
  selectedStage: string | null;
  selectedDealUser: string | null;
  selectedQuestions: SelectedQuestions;
  selectedTags: SelectedTags;
  toBack: () => void
  setStep: (step: number) => void
};

export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
  stepTitles,
  selectedFunnel,
  selectedDealUser,
  selectedStage,
  selectedQuestions,
  selectedTags,
  toBack,
  setStep,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box sx={{ flexGrow: 1, width: "100%", height: "100%"}}>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          height: "100%",
          flexGrow: 1,
        }}
      >
        <Typography
          sx={{
            fontSize: "24px",
            fontWeight: 500,
            lineHeight: "28.44px"

          }}
        >
          Мои настройки
        </Typography>
        <Box
          sx={{
            marginTop: "20px",
            width: "100%",
            minHheight: "440px",
            maxHeight: "90%",
            borderRadius: "10px",
            padding: " 0 20px",
            boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
            overflowY: "auto",
            flexGrow: 1,
          }}
        >
          {stepTitles &&
            stepTitles.map((title, index) => (
              <SettingItem
                step={index+1}
                title={title}
                selectedDealUser={selectedDealUser}
                selectedFunnel={selectedFunnel}
                selectedStage={selectedStage}
                selectedQuestions={selectedQuestions}
                selectedTags={selectedTags}

                setStep={setStep}
              />
            ))}
        </Box>
        <Box
          sx={{
            alignSelf: "end",
          }}
        >
          <StepButtonsBlock
            onSmallBtnClick={toBack}
            isLargeBtnMissing={true}
          />
        </Box>
      </Box>
    </Box>
  );
};