"use client";

import { HsvaColor, hsvaToRgba, rgbaToHsva } from "@noya-app/noya-color";
import type { Sketch } from "@noya-app/noya-file-format";
import * as React from "react";
import { ColorModel } from "../types";
import { equalColorObjects } from "../utils/compare";
import { rgbaToSketchColor, sketchColorToRgba } from "../utils/sketchColor";
import Alpha from "./Alpha";
import NoyaColorPicker from "./ColorPicker";
import Hue from "./Hue";
import Saturation from "./Saturation";

interface Props {
  value: Sketch.Color;
  onChange: (color: Sketch.Color) => void;
}

const colorModel: ColorModel<HsvaColor> = {
  defaultColor: { h: 0, s: 0, v: 0, a: 1 },
  equal: equalColorObjects,
  toHsva: (a) => a,
  fromHsva: (a) => a,
};

export const SketchColorPicker = React.memo(function ColorPicker({
  value,
  onChange,
}: Props) {
  const hsva = value.colorSpaces?.hsva;

  const color = React.useMemo(() => {
    return hsva
      ? { h: hsva.hue, s: hsva.saturation, v: hsva.value, a: hsva.alpha }
      : rgbaToHsva(sketchColorToRgba(value));
  }, [value, hsva]);

  const handleChange = React.useCallback(
    (hsva: HsvaColor) => {
      const updated = rgbaToSketchColor(hsvaToRgba(hsva));

      updated.colorSpaces = {
        hsva: {
          hue: hsva.h,
          saturation: hsva.s,
          value: hsva.v,
          alpha: hsva.a,
        },
      };

      onChange(updated);
    },
    [onChange]
  );

  return (
    <NoyaColorPicker<HsvaColor>
      color={color}
      colorModel={colorModel}
      onChange={handleChange}
    >
      <Saturation />
      <div style={{ height: "12px" }} />
      <Hue />
      <div style={{ height: "5px" }} />
      <Alpha />
    </NoyaColorPicker>
  );
});