import * as React from "react";
import { FC, useMemo } from "react";
import CheckboxIcon from "@icons/Checkbox";
import { SelectChangeEvent, Typography, useTheme, Box, FormControlLabel, RadioGroup, Radio, useMediaQuery } from "@mui/material";
import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";
import { determineScrollBottom } from "@/utils/throttle";
import { throttle } from "@frontend/kitui";

type CustomRadioGroupProps = {
  items: MinifiedData[] | [];
  selectedItemId?: string | null;
  setSelectedItem: (value: string | null) => void;
  handleScroll: () => void;
  activeScope?: TagKeys;
};

export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
  items,
  selectedItemId = "",
  setSelectedItem,
  handleScroll,
  activeScope,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const currentItem =
    (selectedItemId !== null && selectedItemId.length > 0) ?
      items.find((item) => item.id === selectedItemId) || null
      :
      null;

  const filteredItems =
    (activeScope !== undefined) ?
    items.filter((item) => {
        return item.entity === activeScope;
      }) : items

  const formControlLabels = 
     (filteredItems.length !== 0) ?
       filteredItems.map((item) => (
        <FormControlLabel
          key={item.id}
          sx={{
            color: "black",
            padding: "15px",
            borderBottom: `1px solid ${theme.palette.background.default}`,
            display: "flex",
            justifyContent: "space-between",
            borderRadius: "12px",
            margin: 0,
            backgroundColor:
              currentItem?.id === item.id ? theme.palette.background.default : theme.palette.common.white,
            "&.MuiFormControlLabel-root > .MuiTypography-root": {
              width: isMobile ? "150px" : "200px",
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap"
            },
          }}
          value={item.id}
          control={
            <Radio
              checkedIcon={
                <CheckboxIcon
                  checked
                  isRounded
                  color={theme.palette.brightPurple.main}
                />
              }
              icon={<CheckboxIcon isRounded />}
            />
          }
          label={item.title}
          labelPlacement={"start"}
        />
      ))
    :
     (
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          padding: "15px",
        }}
      >
        <Typography>Нет элементов</Typography>
      </Box>
    )

  return (
    <Box
    
      onScroll={(e) => determineScrollBottom(e, throttle(handleScroll, 700))}
      sx={{
        border: `1px solid ${theme.palette.grey2.main}`,
        borderRadius: "12px",
        padding: "5px",
        maxHeight: "305px",
        overflowY: "auto",
      }}
    >
      <RadioGroup
        aria-labelledby="demo-controlled-radio-buttons-group"
        name="controlled-radio-buttons-group"
        value={selectedItemId}
        onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
      >
        {formControlLabels}
      </RadioGroup>
    </Box>
  );
};
