import { useState } from "react";
import { ColorIndicator } from "./ColorIndicator";
import { Banner } from "./core/Banner";
import { Button } from "./core/Button";
import { ColorPickerWithThemeColors } from "./core/ColorPicker";

export function EnvironmentColorPicker({
  color: defaultColor,
  onChange,
}: {
  color: string | null;
  onChange: (color: string | null) => void;
}) {
  const [color, setColor] = useState<string | null>(defaultColor);
  return (
    <form
      className="flex flex-col items-stretch gap-5 pb-2 w-full"
      onSubmit={(e) => {
        e.preventDefault();
        onChange(color);
      }}
    >
      <Banner color="secondary">
        This color will be used to color the interface when this environment is active
      </Banner>
      <ColorPickerWithThemeColors color={color} onChange={setColor} />
      <Button type="submit" color="secondary">
        {color != null && <ColorIndicator color={color} />}
        Save
      </Button>
    </form>
  );
}