import { FC, useRef } from "react";
import ColorsImage from "../../../../assets/images/colors.png";

const WORKSPACE_COLORS = [
  "#FF6B9D",
  "#F5A623",
  "#6B7B7E",
  "#1A1A1A",
  "#C94C4C",
  "#F5F5FF",
  "#A8E6CF",
] as const;

type Props = {
  selectedColor: string;
  onChange: (color: string) => void;
};

const WorkspaceColorPicker: FC<Props> = ({ selectedColor, onChange }) => {
  const colorInputRef = useRef<HTMLInputElement>(null);
  const isCustomColor = !WORKSPACE_COLORS.includes(
    selectedColor as (typeof WORKSPACE_COLORS)[number],
  );

  return (
    <div className="flex gap-2.5 items-center flex-wrap">
      <button
        type="button"
        onClick={() => colorInputRef.current?.click()}
        className="size-8 rounded-full shrink-0 overflow-hidden"
        style={{
          boxShadow: isCustomColor ? "inset 0 0 0 2px #000" : undefined,
        }}
      >
        <img
          src={ColorsImage}
          alt=""
          className="size-full object-cover"
          draggable={false}
        />
      </button>

      {WORKSPACE_COLORS.map((color) => (
        <button
          key={color}
          type="button"
          onClick={() => onChange(color)}
          className="size-8 rounded-xl shrink-0"
          style={{
            backgroundColor: color,
            boxShadow:
              selectedColor === color
                ? "inset 0 0 0 2px #000"
                : color === "#F5F5FF"
                  ? "inset 0 0 0 1px rgba(0,0,0,0.12)"
                  : undefined,
          }}
        />
      ))}

      <input
        ref={colorInputRef}
        type="color"
        value={isCustomColor ? selectedColor : "#4A90D9"}
        className="hidden"
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
};

export default WorkspaceColorPicker;
