import {
  Box,
  Divider,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import type { DesignItem } from "./DesignGroup";
import { DesignGroup } from "./DesignGroup";

import Desgin1 from "@icons/designs/smallSize/design1.jpg";
import Desgin2 from "@icons/designs/smallSize/design2.jpg";
import Desgin3 from "@icons/designs/smallSize/design3.jpg";
import Desgin4 from "@icons/designs/smallSize/design4.jpg";
import Desgin5 from "@icons/designs/smallSize/design5.jpg";
import Desgin6 from "@icons/designs/smallSize/design6.jpg";
import Desgin7 from "@icons/designs/smallSize/design7.jpg";
import Desgin8 from "@icons/designs/smallSize/design8.jpg";
import Desgin9 from "@icons/designs/smallSize/design9.jpg";
import Desgin10 from "@icons/designs/smallSize/design10.jpg";

const LIGHT_THEME_BUTTONS: DesignItem[] = [
  {
    label: "Стандартный",
    name: "StandardTheme",
    colors: ["#7E2AEA", "#333647", ""],
  },
  {
    label: "Черно-белый",
    name: "BlackWhiteTheme",
    colors: ["#4E4D51", "#333647", ""],
  },
  {
    label: "Оливковый",
    name: "OliveTheme",
    colors: ["#758E4F", "#333647", ""],
  },
  {
    label: "Фиолетовый",
    name: "PurpleTheme",
    colors: ["#7E2AEA", "#333647", ""],
  },
  { label: "Желтый", name: "YellowTheme", colors: ["#F2B133", "#333647", ""] },
  { label: "Голубой", name: "BlueTheme", colors: ["#4964ED", "#333647", ""] },
  { label: "Розовый", name: "PinkTheme", colors: ["#D34085", "#333647", ""] },
];

const DARK_THEME_BUTTONS: DesignItem[] = [
  {
    label: "Стандартный",
    name: "StandardDarkTheme",
    colors: ["#7E2AEA", "", "#333647"],
  },
  {
    label: "Золотой",
    name: "GoldDarkTheme",
    colors: ["#E6AA37", "", "#333647"],
  },
  {
    label: "Розовый",
    name: "PinkDarkTheme",
    colors: ["#D34085", "", "#333647"],
  },
  {
    label: "Бирюзовый",
    name: "BlueDarkTheme",
    colors: ["#07A0C3", "", "#333647"],
  },
];

const DESIGNG_LIST_FIRST: DesignItem[] = [
  { label: "Дизайн 1", name: "Design1", picture: Desgin1 },
  { label: "Дизайн 2", name: "Design2", picture: Desgin2 },
  { label: "Дизайн 3", name: "Design3", picture: Desgin3 },
  { label: "Дизайн 4", name: "Design4", picture: Desgin4 },
  { label: "Дизайн 5", name: "Design5", picture: Desgin5 },
];
const DESIGNG_LIST_SECOND: DesignItem[] = [
  { label: "Дизайн 6", name: "Design6", picture: Desgin6 },
  { label: "Дизайн 7", name: "Design7", picture: Desgin7 },
  { label: "Дизайн 8", name: "Design8", picture: Desgin8 },
  { label: "Дизайн 9", name: "Design9", picture: Desgin9 },
  { label: "Дизайн 10", name: "Design10", picture: Desgin10 },
];

interface DesignFillingProps {
  mobileSidebar: boolean;
  heightSidebar: number;
}

export const DesignFilling = ({
  mobileSidebar,
  heightSidebar,
}: DesignFillingProps) => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(830));
  const heightBar = heightSidebar + 51 + 88 + 36;

  return (
    <Box
      sx={{
        width: "100%",
        padding: isMobile
          ? mobileSidebar
            ? `calc(${heightBar}px - 92px) 16px 70px 16px`
            : "67px 16px 70px 16px"
          : "25px",
        height: isMobile ? "100vh" : "calc(100vh - 80px)",
      }}
    >
      <Typography variant="h5" sx={{ marginBottom: "40px", color: "#333647" }}>
        Дизайн
      </Typography>
      <Paper
        sx={{
          padding: "5px",
          maxWidth: "796px",
          width: "100%",
          borderRadius: "12px",
          height: "calc(100vh - 300px)",
          mb: "76px"
        }}
      >
        <Box
          sx={{
            padding: "20px",
            height: "100%",
            overflow: "auto",
            scrollbarWidth: "auto",
            "&::-webkit-scrollbar": {
              display: "block",
              width: "8px",
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: theme.palette.brightPurple.main,
              borderRadius: "4px",
            },
          }}
        >
          <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
            <DesignGroup
              title="Со светлым фоном"
              value={quiz?.config.design ? "" : quiz?.config.theme || ""}
              list={LIGHT_THEME_BUTTONS}
              onChange={(name) =>
                updateQuiz(quiz?.id, (quiz) => {
                  quiz.config.design = false;
                  quiz.config.theme = name;
                })
              }
            />
            <DesignGroup
              title="С тёмным фоном"
              value={quiz?.config.design ? "" : quiz?.config.theme || ""}
              list={DARK_THEME_BUTTONS}
              onChange={(name) =>
                updateQuiz(quiz?.id, (quiz) => {
                  quiz.config.design = false;
                  quiz.config.theme = name;
                })
              }
            />
          </Box>
          <Box>
            <Divider sx={{ margin: "20px 0", background: "#7E2AEA33" }} />
          </Box>
          <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
            <DesignGroup
              title="С картинкой"
              value={quiz?.config.theme || ""}
              list={DESIGNG_LIST_FIRST}
              onChange={(name) =>
                updateQuiz(quiz?.id, (quiz) => {
                  quiz.config.design = true;
                  quiz.config.theme = name;
                })
              }
            />
            <DesignGroup
              value={quiz?.config.theme || ""}
              list={DESIGNG_LIST_SECOND}
              onChange={(name) =>
                updateQuiz(quiz?.id, (quiz) => {
                  quiz.config.design = true;
                  quiz.config.theme = name;
                })
              }
            />
          </Box>
        </Box>
      </Paper>
    </Box>
  );
};