import React, {useCallback, useContext, useState} from "react";
import {ColorPreset} from "../models/Colors";
import DialogContext from "../contexts/DialogContext";
import {DialogType} from "../models/Dialog";
import {Dialog} from "../primitives/Layout";
import {LuciferIcon} from "../models/Icons";
import {HSColorPicker, Input, KelvinColorPicker} from "../primitives/Forms";

interface ColorDialogProps {
  data?: ColorPreset
}

export default function ColorDialog({data}: ColorDialogProps) {
  const {setDialog, clearDialog} = useContext(DialogContext);

  const [name, setName] = useState(data?.name || "");
  const [hue, setHue] = useState(data?.value?.h || 0);
  const [sat, setSat] = useState(data?.value?.s || 0);
  const [kelvin, setKelvin] = useState(data?.value?.kelvin || 0);

  const onClose = useCallback(() => {
    setDialog({type: DialogType.None});
  }, [setDialog]);

  return (
    <Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
      {icon: LuciferIcon.Check, text: "Lagre"},
      {icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
    ]}>
      <Input label="Navn" value={name} onChange={setName}/>
      <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
        setHue(h);
        setSat(s);
      }}/>
      <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
    </Dialog>
  );
}