"use client";

import { HsvaColor } from "@noya-app/noya-color";
import { useDeepMemo } from "@noya-app/react-utils";
import React, { ReactNode, useCallback, useMemo, type JSX } from "react";
import {
  ColorPickerContextValue,
  ColorPickerProvider,
} from "../contexts/ColorPickerContext";
import { AnyColor, ColorModel, ColorPickerBaseProps } from "../types";

interface Props<T extends AnyColor> extends Partial<ColorPickerBaseProps<T>> {
  colorModel: ColorModel<T>;
  children?: ReactNode;
}

export default function ColorPicker<T extends AnyColor>({
  colorModel,
  color = colorModel.defaultColor,
  onChange,
  children,
  style,
  className,
}: Props<T>): JSX.Element {
  const hsva = useDeepMemo(colorModel.toHsva(color));

  const handleChange = useCallback(
    (params: Partial<HsvaColor>) => {
      onChange?.(colorModel.fromHsva({ ...hsva, ...params }));
    },
    [colorModel, hsva, onChange]
  );

  const contextValue = useMemo(
    (): ColorPickerContextValue => [hsva, handleChange],
    [handleChange, hsva]
  );

  return (
    <ColorPickerProvider value={contextValue}>
      <div
        style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          userSelect: "none",
          cursor: "default",
          ...style,
        }}
        className={className}
      >
        {children}
      </div>
    </ColorPickerProvider>
  );
}