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

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

import type { Theme } from "@model/quizSettings";
import type { Design } from "@model/quizSettings";
import type { DesignItem } from "./DesignGroup";

const LIGHT_THEME_BUTTONS: DesignItem<Theme>[] = [
  {
    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<Theme>[] = [
  {
    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<Design>[] = [
  { 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<Design>[] = [
  { 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: "25px",
        height: isMobile
          ? mobileSidebar
            ? `calc(100vh - ${heightBar}px)`
            : "calc(100vh - 127px)"
          : "calc(100vh - 80px)",
      }}
    >
      <Typography variant="h5" sx={{ marginBottom: "40px", color: "#333647" }}>
        Дизайн
      </Typography>
      <Paper
        sx={{
          padding: "20px",
          maxWidth: "796px",
          width: "100%",
          borderRadius: "12px",
          height: "calc(100vh - 280px)",
          overflow: "auto",
        }}
      >
        <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
          <DesignGroup<Theme>
            title="Со светлым фоном"
            value={quiz?.config.design ? "" : quiz?.config.theme || ""}
            list={LIGHT_THEME_BUTTONS}
            onChange={(name) =>
              updateQuiz(quiz?.id, (quiz) => {
                quiz.config.design = "";
                quiz.config.theme = name;
              })
            }
          />
          <DesignGroup<Theme>
            title="С тёмным фоном"
            value={quiz?.config.design ? "" : quiz?.config.theme || ""}
            list={DARK_THEME_BUTTONS}
            onChange={(name) =>
              updateQuiz(quiz?.id, (quiz) => {
                quiz.config.design = "";
                quiz.config.theme = name;
              })
            }
          />
        </Box>
        <Box>
          <Divider sx={{ margin: "20px 0", background: "#7E2AEA33" }} />
        </Box>
        <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
          <DesignGroup<Design>
            title="С картинкой"
            value={quiz?.config.design || ""}
            list={DESIGNG_LIST_FIRST}
            onChange={(name) =>
              updateQuiz(quiz?.id, (quiz) => {
                quiz.config.theme = "StandardTheme";
                quiz.config.design = name;
              })
            }
          />
          <DesignGroup<Design>
            value={quiz?.config.design || ""}
            list={DESIGNG_LIST_SECOND}
            onChange={(name) =>
              updateQuiz(quiz?.id, (quiz) => {
                quiz.config.theme = "StandardTheme";
                quiz.config.design = name;
              })
            }
          />
        </Box>
      </Paper>
    </Box>
  );
};
