import {
  Box,
  Button,
  Modal,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { CheckboxSelect } from "@ui_kit/CheckboxSelect";
import { Select } from "../../../pages/Questions/Select";
import { FC } from "react";
import { ClockWiseIcon } from "@icons/ClockWiseIcon";

const options = [
  { label: "Муром (1)", value: "option1" },
  { label: "Москва (1)", value: "option2" },
];

interface Iprops {
  open: boolean;
  handleClose: () => void;
  filterNew: string;
  filterDate: string;
  setFilterNew: (a: string) => void;
  setFilterDate: (a: string) => void;
  itemsTime: string[];
  itemsNews: string[];
}

export const FilterModal: FC<Iprops> = ({
  open,
  handleClose,
  filterNew,
  filterDate,
  setFilterNew,
  setFilterDate,
  itemsTime,
  itemsNews,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));

  const style = {
    position: "absolute" as "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "100%",
    maxWidth: isMobile ? 343 : 620,
    bgcolor: "background.paper",
    boxShadow: 24,
    borderRadius: "12px",
  };

  return (
    <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        <Box
          sx={{
            background: "#F2F3F7",
            p: "25px 20px",
            borderTopLeftRadius: "12px",
            borderTopRightRadius: "12px",
          }}
        >
          <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
            Настройте фильтры отображения
          </Typography>
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "15px",
            mb: "35px",
            p: "20px",
          }}
        >
          <Select
            sx={{ width: "100%" }}
            items={itemsTime}
            data={filterDate}
            onChange={setFilterDate}
            placeholder="За всё время"
          />
          <Select
            sx={{ width: "100%" }}
            items={itemsNews}
            data={filterNew}
            onChange={setFilterNew}
            placeholder="Все заявки"
          />
        </Box>

        <Box sx={{ p: "0 20px 20px" }}>
          <Button
            sx={{
              width: "234px",
              height: "48px",
              gap: "6px",
              fontSize: "18px",
              color: "#7E2AEA",
              background: "#F2F3F7",
              borderRadius: "8px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
            onClick={() => {
              setFilterNew("Все заявки");
              setFilterDate("За всё время");
            }}
          >
            Сбросить фильтры <ClockWiseIcon />
          </Button>
        </Box>
      </Box>
    </Modal>
  );
};
