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

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

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

export const DealPerformers: FC<Props> = ({
  users,
  handlePrevStep,
  handleNextStep,
  selectedDealUser,
  setSelectedDealPerformer,
  onScrollUsers,
  titleProps,
}) => {
  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={{ width: "100%", zIndex: 3 }}>
    <ModalTitle
    {...titleProps}
    />
        <CustomSelect
          items={users}
          selectedItemId={selectedDealUser}
          setSelectedItem={setSelectedDealPerformer}
          handleScroll={onScrollUsers}
        />
      </Box>
      <Box
        sx={{
          marginTop: "auto",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onLargeBtnClick={handleNextStep}
          onSmallBtnClick={handlePrevStep}
        />
      </Box>
    </Box>
    </>
  );
};
