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 { SelectedQuestions, SelectedTags } from "../../types";

type SettingItemProps = {
  step: number;
  title: string;
  setStep: (step: number) => void;
  selectedFunnelPerformer: string | null;
  selectedFunnel: string | null;
  selectedStagePerformer: string | null;
  selectedDealUser: string | null;
  selectedStage: string | null;
  selectedQuestions: SelectedQuestions;
  selectedTags: SelectedTags;
};

export const SettingItem: FC<SettingItemProps> = ({
  step,
  title,
  setStep,
  selectedFunnelPerformer,
  selectedFunnel,
  selectedStagePerformer,
  selectedDealUser,
  selectedStage,
  selectedQuestions,
  selectedTags,
}) => {
  const theme = useTheme();
  console.log(step)
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  if (step === 0) {
    return;
  }

  const SettingsContent = useMemo(() => {
    if (step === 1) {
      return (
        <>
          <ResponsiblePerson performer={selectedDealUser} />
          <SelectedParameter parameter={selectedFunnel} />
        </>
      );
    }
    if (step === 2) {
      return (
        <>
          <ResponsiblePerson performer={selectedDealUser} />
          <SelectedParameter parameter={selectedStage} />
        </>
      );
    }
    if (step === 3) {
      return (
        <>
          <ResponsiblePerson performer={selectedDealUser} />
        </>
      );
    }
    if (step === 4) {
      const isFilled = Object.values(selectedTags).some((array) => array.length > 0);
      const status = isFilled ? "Заполнено" : "Не заполнено";

      return (
        <>
          <Typography
            sx={{
              color: theme.palette.grey2.main,
              fontSize: "18px",
              fontWeight: 400,
              margin: "10px 8px 0 0",
            }}
            display={"inline-block"}
          >
            Статус:
          </Typography>
          <Typography
            sx={{
              color: theme.palette.grey3.main,
              fontSize: "18px",
              fontWeight: 400,
            }}
            display={"inline"}
          >
            {status}
          </Typography>
        </>
      );
    }
    if (step === 5) {
      const isFilled = Object.values(selectedQuestions).some((array) => array.length > 0);
      const status = isFilled ? "Заполнено" : "Не заполнено";

      return (
        <>
          <Typography
            sx={{
              color: theme.palette.grey2.main,
              fontSize: "18px",
              fontWeight: 400,
              margin: "10px 8px 0 0",
            }}
            display={"inline-block"}
          >
            Статус:
          </Typography>
          <Typography
            sx={{
              color: theme.palette.grey3.main,
              fontSize: "18px",
              fontWeight: 400,
            }}
            display={"inline"}
          >
            {status}
          </Typography>
        </>
      );
    }
    return null;
  }, [
    step,
    selectedFunnelPerformer,
    selectedFunnel,
    selectedStagePerformer,
    selectedDealUser,
    selectedStage,
    selectedQuestions,
    selectedTags,
  ]);

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