import Box from "@mui/material/Box";
import { FC, useMemo } from "react";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader";
import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson";
import { SelectedParameter } from "./SelectedParameter/SelectedParameter";
import { FileBlock } from "../../IntegrationStep5/FileBlock/FileBlock";

type SettingItemProps = {
  step: number;
  title: string;
  setStep: (value: number) => void;
  setIsSettingsBlock: (value: boolean) => void;
  selectedFunnelPerformer: string | null;
  selectedFunnel: string | null;
  selectedStagePerformer: string | null;
  selectedDealPerformer: string | null;
  selectedStage: string | null;
  utmFile: File | null;
};

export const SettingItem: FC<SettingItemProps> = ({
  step,
  title,
  setStep,
  setIsSettingsBlock,
  selectedFunnelPerformer,
  selectedFunnel,
  selectedStagePerformer,
  selectedDealPerformer,
  selectedStage,
  utmFile,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  if (step === 0) {
    return;
  }

  const SettingsContent = useMemo(() => {
    if (step === 1) {
      return (
        <>
          <ResponsiblePerson performer={selectedFunnelPerformer} />
          <SelectedParameter parameter={selectedFunnel} />
        </>
      );
    }
    if (step === 2) {
      return (
        <>
          <ResponsiblePerson performer={selectedStagePerformer} />
          <SelectedParameter parameter={selectedStage} />
        </>
      );
    }
    if (step === 3) {
      return (
        <>
          <ResponsiblePerson performer={selectedDealPerformer} />
        </>
      );
    }
    if (step === 4) {
      return (
        <Box sx={{ display: "flex", gap: "15px", marginTop: "20px" }}>
          {utmFile ? (
            <FileBlock file={utmFile} />
          ) : (
            <Typography>Файл не загружен</Typography>
          )}
        </Box>
      );
    }
    return null;
  }, [
    step,
    selectedFunnelPerformer,
    selectedFunnel,
    selectedStagePerformer,
    selectedDealPerformer,
    selectedStage,
    utmFile,
  ]);

  return (
    <Box
      sx={{
        width: "100%",
        padding: "20px 0",
        borderTop: `1px solid ${theme.palette.background.default}`,
      }}
    >
      <SettingItemHeader
        title={title}
        step={step}
        setIsSettingsBlock={setIsSettingsBlock}
        setStep={setStep}
      />
      <Box>{SettingsContent}</Box>
    </Box>
  );
};
