// Generated with util/create-component.js
import React, { useMemo } from "react";
import { isValidSpecValue } from "../../utils/functions";
import {
  ColorChipsProps,
  COLOR_CHIPS,
  COLOR_CHIP_PATTERN,
  TCOLOR_OF_COLOR_CHIPS,
} from "./ColorChips.types";

const ColorChips = ({
  colors,
  chipHeight,
  chipWidth,
  direction = "row",
  shape = "circle",
  size = 6,
  isWrapped = false,
  wrapperClassName = "",
}: ColorChipsProps) => {
  const refinedColors = useMemo(() => {
    return colors
      .split("/")
      .filter((color) => isValidSpecValue(color))
      .slice(0, size);
  }, [colors, size]);

  if (refinedColors.length < 2) {
    return null;
  }

  return (
    <div
      data-testid="ColorChips"
      className={`nrc--ColorChips ${
        direction === "row" ? "flex" : "flex flex-col space-y-[0.5rem]"
      } ${direction === "row" &&
        (isWrapped ? "flex-wrap" : "space-x-[0.3rem]")} ${wrapperClassName}`}
    >
      {refinedColors.map((color) => {
        const colorHexValue = COLOR_CHIPS[color as TCOLOR_OF_COLOR_CHIPS];

        if (color === "패턴") {
          return (
            <ColorChipPattern
              key={`colorChipPattern_${colorHexValue}`}
              width={chipWidth}
              height={chipHeight}
              shape={shape}
              isWrapped={isWrapped}
            />
          );
        }

        if (color.indexOf("+") !== -1) {
          const combinationColors = color.split("+");

          return (
            <ColorChipCombination
              key={`colorChipCombination_${colorHexValue}`}
              colors={combinationColors}
              direction={"column"}
              width={chipWidth}
              height={chipHeight}
              shape={shape}
              isWrapped={isWrapped}
            />
          );
        }

        if (colorHexValue) {
          return (
            <div
              data-testid="ColorChip"
              key={`colorChip_${colorHexValue}`}
              className={`${
                shape === "circle" ? "rounded-full" : "rounded-none"
              } ${
                colorHexValue === "#FFFFFF"
                  ? "border-[1px] border-gray-3"
                  : "border-none"
              } ${isWrapped ? "mx-[0.2rem] my-[0.3rem]" : ""}`}
              style={{
                backgroundColor: colorHexValue,
                width: `${chipWidth}rem`,
                height: `${chipHeight}rem`,
              }}
            />
          );
        }
      })}
    </div>
  );
};

export default ColorChips;

const ColorChipPattern = ({
  width,
  height,
  shape = "circle",
  isWrapped,
}: {
  width: string;
  height: string;
  shape?: "circle" | "square";
  isWrapped: boolean;
}) => {
  return (
    <div
      data-testid="ColorChipPattern"
      className={`inline-grid overflow-hidden ${
        isWrapped ? "mx-[0.2rem] my-[0.3rem]" : ""
      }`}
      style={{
        gridTemplateColumns: `${+width / 2}rem ${+width / 2}rem`,
        gridTemplateRows: `${+height / 2}rem ${+height / 2}rem`,
      }}
    >
      {COLOR_CHIP_PATTERN.map((color, index) => {
        return (
          <div
            key={`patternPart_${color}`}
            style={{
              backgroundColor: color,
              borderTopLeftRadius:
                index === 0 && shape === "circle" ? "100%" : 0,
              borderTopRightRadius:
                index === 1 && shape === "circle" ? "100%" : 0,
              borderBottomLeftRadius:
                index === 2 && shape === "circle" ? "100%" : 0,
              borderBottomRightRadius:
                index === 3 && shape === "circle" ? "100%" : 0,
            }}
          />
        );
      })}
    </div>
  );
};

const ColorChipCombination = ({
  colors,
  direction,
  width,
  height,
  shape = "circle",
  isWrapped,
}: {
  colors: string[];
  direction: "row" | "column";
  width: string;
  height: string;
  shape?: "circle" | "square";
  isWrapped: boolean;
}) => {
  return (
    <div
      data-testid="ColorChipCombination"
      className={`${
        colors.indexOf("화이트") !== -1
          ? "border-[1px] border-solid border-gray-3"
          : "border-none"
      } ${direction === "row" ? "flex" : "flex-col"} ${
        shape === "circle" ? "rounded-full" : "rounded-none"
      } ${
        isWrapped ? "mx-[0.2rem] my-[0.3rem]" : ""
      } inline-flex overflow-hidden`}
      style={{ width: `${width}rem`, height: `${height}rem` }}
    >
      {colors.map((color) => {
        const colorHexValue = COLOR_CHIPS[color as TCOLOR_OF_COLOR_CHIPS];

        return (
          <div
            key={`combinationColor_${colorHexValue}`}
            style={{
              backgroundColor: colorHexValue,
              flexBasis: "50%",
            }}
          />
        );
      })}
    </div>
  );
};