"use client";

import { useRef, type ChangeEvent } from "react";
import { useTranslations } from "next-intl";
import { FlipHorizontal, FlipVertical, ImagePlus } from "lucide-react";

import {
  PanelSection,
  PropertySlider,
} from "@/components/studio/properties/PropertyControls";
import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
import { getImageProps } from "@/lib/studio-layer-props";
import type { Layer } from "@/lib/studio-types";

interface ImageLayerPropertiesProps {
  layer: Layer;
}

export function ImageLayerProperties({ layer }: ImageLayerPropertiesProps) {
  const t = useTranslations("auto.componentsStudioPropertiesImageLayerProperties");
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { update, updateProps } = useLayerUpdater(layer);
  const image = getImageProps(layer.props);

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => {
      if (typeof reader.result === "string") {
        updateProps({ src: reader.result });
      }
    };
    reader.readAsDataURL(file);
    event.target.value = "";
  };

  return (
    <PanelSection title={t("sectionTitle")}>
      <PropertySlider
        label={t("opacity")}
        min={0}
        max={100}
        value={Math.round(layer.opacity * 100)}
        formatValue={(value) => `${value}%`}
        onChange={(opacity) => update({ opacity: opacity / 100 })}
      />
      <div className="grid grid-cols-2 gap-2">
        <button
          type="button"
          onClick={() =>
            updateProps({ flipHorizontal: !image.flipHorizontal })
          }
          className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        >
          <FlipHorizontal className="h-3.5 w-3.5" aria-hidden />
          {t("flipHorizontal")}
        </button>
        <button
          type="button"
          onClick={() => updateProps({ flipVertical: !image.flipVertical })}
          className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        >
          <FlipVertical className="h-3.5 w-3.5" aria-hidden />
          {t("flipVertical")}
        </button>
      </div>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={handleFileChange}
      />
      <button
        type="button"
        onClick={() => fileInputRef.current?.click()}
        className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      >
        <ImagePlus className="h-3.5 w-3.5" aria-hidden />
        {t("replaceImage")}
      </button>
      <PropertySlider
        label={t("borderRadius")}
        min={0}
        max={100}
        value={image.cornerRadius}
        onChange={(cornerRadius) => updateProps({ cornerRadius })}
      />
    </PanelSection>
  );
}
