"use client";

import { useTranslations } from "next-intl";

import { Slider } from "@/components/ui/slider";
import { useImageEditorStore } from "@/lib/image-editor-store";

const SLIDERS = [
  { key: "brightness" as const, labelKey: "brightness", min: -100, max: 100 },
  { key: "contrast" as const, labelKey: "contrast", min: -100, max: 100 },
  { key: "saturation" as const, labelKey: "saturation", min: -100, max: 100 },
  { key: "hue" as const, labelKey: "hue", min: -180, max: 180 },
  { key: "blur" as const, labelKey: "blur", min: 0, max: 20 },
  { key: "sharpen" as const, labelKey: "sharpen", min: 0, max: 10 },
  { key: "vignette" as const, labelKey: "vignette", min: 0, max: 100 },
];

export function AdjustPanel() {
  const t = useTranslations("auto.componentsImageEditorPanelsAdjustPanel");
  const adjustments = useImageEditorStore((s) => s.adjustments);
  const setAdjustments = useImageEditorStore((s) => s.setAdjustments);
  const hasBase = useImageEditorStore((s) => s.layers.some((l) => l.type === "image"));

  if (!hasBase) {
    return (
      <p className="text-xs text-gray-500">{t("emptyState")}</p>
    );
  }

  return (
    <div className="space-y-5">
      {SLIDERS.map(({ key, labelKey, min, max }) => (
        <div key={key}>
          <div className="mb-2 flex justify-between text-xs text-gray-400">
            <span>{t(labelKey)}</span>
            <span className="tabular-nums text-gray-300">
              {adjustments[key]}
            </span>
          </div>
          <Slider
            min={min}
            max={max}
            step={key === "hue" ? 1 : key === "blur" ? 0.5 : 1}
            value={[adjustments[key]]}
            onValueChange={([value]) =>
              setAdjustments({ [key]: value ?? adjustments[key] })
            }
          />
        </div>
      ))}
    </div>
  );
}
