import { FC } from "react";
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { SettingItem } from "./SettingItem/SettingItem";
import { TQuestionEntity, TTags } from "../IntegrationsModal";

type SettingsBlockProps = {
  stepTitles: string[];
  setStep: (value: number) => void;
  setIsSettingsBlock: (value: boolean) => void;
  selectedFunnelPerformer: string | null;
  selectedFunnel: string | null;
  selectedStagePerformer: string | null;
  selectedStage: string | null;
  selectedDealPerformer: string | null;
  utmFile: File | null;
  questionEntity: TQuestionEntity;
  tags: TTags;
};

export const SettingsBlock: FC<SettingsBlockProps> = ({
  stepTitles,
  setStep,
  setIsSettingsBlock,
  selectedFunnelPerformer,
  selectedFunnel,
  selectedStagePerformer,
  selectedDealPerformer,
  selectedStage,
  utmFile,
  questionEntity,
  tags,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: "10px",
          width: "100%",
          height: "443px",
          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}
              title={title}
              setIsSettingsBlock={setIsSettingsBlock}
              setStep={setStep}
              selectedFunnelPerformer={selectedFunnelPerformer}
              selectedFunnel={selectedFunnel}
              selectedStagePerformer={selectedStagePerformer}
              selectedDealPerformer={selectedDealPerformer}
              selectedStage={selectedStage}
              utmFile={utmFile}
              questionEntity={questionEntity}
              tags={tags}
            />
          ))}
      </Box>
      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onSmallBtnClick={() => setIsSettingsBlock(false)}
          isLargeBtnMissing={true}
        />
      </Box>
    </Box>
  );
};