import { Box, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { StepButtonsBlock } from "./StepButtonsBlock";
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
import { MinifiedData } from "./types";
import { ModalTitle } from "./ModalTitle";

type Props = {
  pipelines: MinifiedData[];
  users: MinifiedData[];
  handlePrevStep: () => void;
  handleNextStep: () => void;
  selectedDealUser: string | null;
  setSelectedDealPerformer: (value: string | null) => void;
  selectedPipeline: string | null;
  setSelectedPipeline: (value: string | null) => void;

  titleProps: {
    step: number;
    title: string;
    desc: string;
    toSettings: () => void;
  }
    onScroll: () => void;
    onScrollUsers: () => void;
};

export const Pipelines: FC<Props> = ({
  pipelines,
  selectedPipeline,
  setSelectedPipeline,
  titleProps,

  users,
  selectedDealUser,
  setSelectedDealPerformer,
  onScroll,
  onScrollUsers,

  handlePrevStep,
  handleNextStep,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  return (
    <>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          height: "100%",
          overflow: "auto",
          flexGrow: 1,
        }}
      >
        <Box
          sx={{
            height: "100%",
            overflow: "auto",
            zIndex: 3,
            width: "100%",
          }}>
          <Box sx={{ width: "100%", zIndex: 3 }}>
            <ModalTitle
              {...titleProps}
            />
            <CustomSelect
              items={users}
              selectedItemId={selectedDealUser}
              setSelectedItem={setSelectedDealPerformer}
              handleScroll={onScrollUsers}
            />
          </Box>
          <Box
            sx={{
              marginTop: "13px",
              flexGrow: 1,
              width: "100%",
            }}
          >
            <CustomRadioGroup
              items={pipelines}
              selectedItemId={selectedPipeline}
              setSelectedItem={setSelectedPipeline}
              handleScroll={onScroll}
            />
          </Box>
        </Box>
        <Box
          sx={{
            alignSelf: "end",
          }}
        >
          <StepButtonsBlock
            onLargeBtnClick={handleNextStep}
            onSmallBtnClick={handlePrevStep}
          />
        </Box>
      </Box>
    </>
  );
};