import {
  Box,
  Button,
  IconButton,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { FileExportIcon } from "./icons/FileExporIcon";
import { UpdateIcon } from "./icons/UpdateIcon";
import { FilterIcon } from "./icons/FilterIcon";
import { Select } from "../Questions/Select";

interface Props {
  onclickExport: () => void;
  onclickUpdate: () => void;
  onclickFilterTablet: () => void;
  onclickResetFilers: () => void;
  filterNewHC: (value: string) => void;
  filterDateHC: (value: string) => void;
  itemsTime: string[];
  itemsNews: string[];
  filterDate: string;
  filterNew: string;
}

export default function SettingResults({
  onclickExport,
  onclickUpdate,
  onclickFilterTablet,
  onclickResetFilers,
  filterNewHC,
  filterDateHC,
  itemsTime,
  itemsNews,
  filterDate,
  filterNew,
}: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  return (
    <>
      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <IconButton
          onClick={onclickExport}
          sx={{
            width: "44px",
            height: "44px",
            borderRadius: "8px",
            border: "1px solid #7E2AEA",
          }}
        >
          <FileExportIcon />
        </IconButton>
        <IconButton
          sx={{
            width: "44px",
            height: "44px",
            borderRadius: "8px",
            border: "1px solid #7E2AEA",
          }}
          onClick={onclickUpdate}
        >
          <UpdateIcon />
        </IconButton>

        {isTablet && (
          <IconButton
            onClick={onclickFilterTablet}
            sx={{
              background: "#fff",
              width: "44px",
              height: "44px",
              borderRadius: "8px",
              border: "1px solid #7E2AEA",
            }}
          >
            <FilterIcon />
          </IconButton>
        )}
      </Box>

      {!isTablet && (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "20px",
            width: "100%",
            justifyContent: "flex-end",
          }}
        >
          <Select
            items={itemsTime}
            data={filterDate}
            onChange={filterDateHC}
            placeholder="За всё время"
          />
          <Select
            items={itemsNews}
            data={filterNew}
            onChange={filterNewHC}
            placeholder="Все заявки"
          />

          <Button
            onClick={onclickResetFilers}
            sx={{
              maxWidth: "200px",
              width: "100%",
              height: "48px",
              borderRadius: "8px",
              border: "1px solid #7E2AEA",
              color: "#7E2AEA",
            }}
          >
            Сбросить фильтры
          </Button>
        </Box>
      )}
    </>
  );
}
