import {
  Typography,
  Box,
  ButtonBase,
  useTheme,
  useMediaQuery,
} from "@mui/material";

import ColorRingIcon from "./ColorRingIcon";

import type { QuizTheme } from "@model/quizSettings";

export type DesignItem = {
  name: QuizTheme;
  label: string;
  colors?: string[];
  picture?: string;
};

type DesignGroupProps = {
  title?: string;
  list: DesignItem[];
  value: string;
  onChange: (name: QuizTheme) => void;
};

export const DesignGroup = ({
  title,
  list,
  value,
  onChange,
}: DesignGroupProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(830));

  return (
    <Box
      sx={{
        width: isMobile ? "100%" : "48%",
        display: "flex",
        flexDirection: "column",
        gap: "12px",
        paddingTop: title ? 0 : "33px",
      }}
    >
      {title && <Typography color="#9A9AAF">{title}</Typography>}
      {list.map(({ label, name, colors, picture }) => (
        <ButtonBase
          key={name}
          value={name}
          onClick={() => onChange(name)}
          sx={{
            maxWidth: "368px",
            width: "100%",
            padding: "5px",
            background:
              value === name
                ? "linear-gradient(0deg, rgba(126, 42, 234, 0.10) 0%, rgba(126, 42, 234, 0.10) 100%)"
                : "#F2F3F7",
            borderRadius: "12px",
            justifyContent: "space-between",
            border:
              value === name ? "1px solid #7E2AEA" : "1px solid transparent",
          }}
        >
          <Typography sx={{ marginLeft: "15px", color: "#4D4D4D" }}>
            {label}
          </Typography>
          {picture ? (
            <img
              src={picture}
              alt={label}
              style={{
                width: "100%",
                height: "56px",
                maxWidth: "115px",
                borderRadius: "12px",
                objectFit: "cover",
              }}
            />
          ) : (
            <Box sx={{ display: "flex", gap: "5px", padding: "18px" }}>
              {colors?.map((color, index) => (
                <ColorRingIcon key={index} color={color} />
              ))}
            </Box>
          )}
        </ButtonBase>
      ))}
    </Box>
  );
};
