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

type IntegrationStep2Props = {
  handlePrevStep: () => void;
  handleNextStep: () => void;
  selectedFunnelPerformer: string | null;
  setSelectedFunnelPerformer: (value: string | null) => void;
  selectedFunnel: string | null;
  setSelectedFunnel: (value: string | null) => void;
  performers: string[];
  funnels: string[];
};

export const IntegrationStep2: FC<IntegrationStep2Props> = ({
  handlePrevStep,
  handleNextStep,
  selectedFunnelPerformer,
  setSelectedFunnelPerformer,
  selectedFunnel,
  setSelectedFunnel,
  performers,
  funnels,
}) => {
  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%",
        flexGrow: 1,
      }}
    >
      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
        <CustomSelect
          selectedItem={selectedFunnelPerformer}
          items={performers}
          setSelectedItem={setSelectedFunnelPerformer}
        />
      </Box>
      <Box
        sx={{
          marginTop: "20px",
          flexGrow: 1,
          width: "100%",
          height: "346px",
        }}
      >
        <CustomRadioGroup
          items={funnels}
          selectedValue={selectedFunnel}
          setSelectedValue={setSelectedFunnel}
        />
      </Box>
      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onLargeBtnClick={handleNextStep}
          onSmallBtnClick={handlePrevStep}
        />
      </Box>
    </Box>
  );
};