import {
  Box,
  Button,
  Modal,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { FC } from "react";
import { DatePicker } from "@mui/x-date-pickers";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CalendarIcon from "@icons/CalendarIcon";

interface Iprops {
  open: boolean;
  handleClose: () => void;
}

export const ExportContactsModal: FC<Iprops> = ({ open, handleClose }) => {
  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={{
            mt: "10px",
            display: "flex",
            flexDirection: isMobile ? "column" : "-moz-initial",
            alignItems: "center",
            gap: isMobile ? "8px" : "18px",
            p: "0 20px 20px",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: isMobile ? "6px" : "18px",
            }}
          >
            <Typography>c</Typography>
            <DatePicker
              slots={{
                openPickerIcon: () => <CalendarIcon />,
              }}
              slotProps={{
                openPickerButton: {
                  sx: {
                    p: 0,
                  },
                  "data-cy": "open-datepicker",
                },
              }}
              sx={{
                p: "10px",
                "& .MuiInputBase-root": {
                  maxWidth: "250px",
                  width: "100%",
                  backgroundColor: "#F2F3F7",
                  borderRadius: "10px",
                  pr: "31px",
                  "& input": {
                    py: "11px",
                    pl: "13px",
                    lineHeight: "19px",
                  },
                  "& fieldset": {
                    borderColor: "#9A9AAF",
                  },
                },
              }}
            />
          </Box>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: isMobile ? "6px" : "18px",
            }}
          >
            <Typography>до</Typography>

            <DatePicker
              slots={{
                openPickerIcon: () => <CalendarIcon />,
              }}
              slotProps={{
                openPickerButton: {
                  sx: {
                    p: 0,
                  },
                  "data-cy": "open-datepicker",
                },
              }}
              sx={{
                p: "10px",
                "& .MuiInputBase-root": {
                  maxWidth: "250px",
                  width: "100%",
                  backgroundColor: "#F2F3F7",
                  borderRadius: "10px",
                  pr: "31px",
                  "& input": {
                    py: "11px",
                    pl: "13px",
                    lineHeight: "19px",
                  },
                  "& fieldset": {
                    borderColor: "#9A9AAF",
                  },
                },
              }}
            />
          </Box>
        </Box>
        <Box sx={{ p: "0 20px 20px" }}>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "14px" }}>
            <CustomCheckbox label="Ответы в отдельных полях" />
            <CustomCheckbox label="Cookies в отдельных полях" />
            <CustomCheckbox label="Только верифицированные номера" />
          </Box>
          <Box
            sx={{
              display: "flex",
              gap: "10px",
              width: "100%",
              justifyContent: "flex-end",
              mt: "40px",
            }}
          >
            <Button
              sx={{
                width: isMobile ? "100%" : "130px",
                border: "1px solid #9A9AAF",
              }}
              onClick={handleClose}
              variant="outlined"
            >
              Отмена
            </Button>
            <Button
              variant="contained"
              sx={{
                width: isMobile ? "100%" : "130px",
                height: "48px",
                fontSize: "18px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              Готово
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};