import {
  Box,
  Button,
  IconButton,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";
import { FC, useState } from "react";
import { FileExportIcon } from "./icons/FileExporIcon";
import { UpdateIcon } from "./icons/UpdateIcon";
import { Select } from "../../pages/Questions/Select";
import { CheckboxSelect } from "../../ui_kit/CheckboxSelect";
import { CardAnswer } from "./CardAnswer";
import { FilterIcon } from "./icons/FilterIcon";

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

export const QuizAnswersPage: FC = () => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  return (
    <Box>
      <HeaderFull />
      <SectionWrapper maxWidth="lg">
        <Typography
          sx={{ fontSize: "36px", fontWeight: "500", mb: "50px", mt: "60px" }}
        >
          Заголовок квиза
        </Typography>

        <Box
          sx={{
            width: "100%",
            display: isTablet ? "flex" : "-moz-initial",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
              Ответы на квиз
            </Typography>
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              (1)
            </Typography>
          </Box>

          <Box
            sx={{
              mt: "20px",
              mb: "31px",
              gap: "30px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              width: isTablet ? "auto" : "100%",
            }}
          >
            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <IconButton
                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",
                }}
              >
                <UpdateIcon />
              </IconButton>

              {isTablet && (
                <IconButton
                  sx={{
                    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
                  sx={{ maxWidth: "223px", width: "100%" }}
                  items={[
                    "За все время",
                    "Сегодня",
                    "Вчера",
                    "Последние 7 дней",
                    "Последние 30 дней",
                    "Этот месяц",
                  ]}
                />
                <Select
                  sx={{ maxWidth: "223px", width: "100%" }}
                  items={["Все заявки", "Новые", "Ошибка интеграции"]}
                />

                <CheckboxSelect
                  sx={{ maxWidth: "223px", width: "100%" }}
                  placeholder="Выберите город"
                  options={options}
                />

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

        {!isTablet && (
          <Box
            sx={{
              display: "flex",
              width: "100%",
              alignItems: "center",
              mb: "15px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF", mr: "40px" }}>
              № заявки
            </Typography>
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Дата
            </Typography>
            <Typography
              sx={{ fontSize: "18px", color: "#9A9AAF", ml: "288px" }}
            >
              Контакты
            </Typography>
          </Box>
        )}

        <Box
          sx={{
            display: "flex",
            alignItems: "flex-start",
            flexDirection: isTablet ? "-moz-initial" : "column",
            flexWrap: isTablet ? "wrap" : "nowrap",
            gap: "20px",
          }}
        >
          <CardAnswer />
          <CardAnswer />
        </Box>
      </SectionWrapper>
    </Box>
  );
};