flatrender/src/components/studio/properties/CommonLayerControls.tsx

"use client";

import { useRef, useState } from "react";
import { useTranslations } from "next-intl";
import { ArrowDown, ArrowUp, Trash2 } from "lucide-react";

import {
  AspectRatioLockButton,
  PanelSection,
  PropertyNumberInput,
} from "@/components/studio/properties/PropertyControls";
import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
import type { Layer } from "@/lib/studio-types";
import { useStudioStore } from "@/lib/studio-store";

interface CommonLayerControlsProps {
  layer: Layer;
}

export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
  const t = useTranslations("auto.componentsStudioPropertiesCommonLayerControls");
  const [aspectLocked, setAspectLocked] = useState(false);
  const aspectRatioRef = useRef(layer.width / layer.height || 1);
  const { update } = useLayerUpdater(layer);
  const deleteLayer = useStudioStore((state) => state.deleteLayer);
  const moveLayerToFront = useStudioStore((state) => state.moveLayerToFront);
  const moveLayerToBack = useStudioStore((state) => state.moveLayerToBack);

  const aspectRatio = aspectRatioRef.current;

  const setWidth = (width: number) => {
    if (aspectLocked) {
      update({ width, height: Math.max(8, width / aspectRatio) });
      return;
    }
    update({ width: Math.max(8, width) });
  };

  const setHeight = (height: number) => {
    if (aspectLocked) {
      update({ height, width: Math.max(8, height * aspectRatio) });
      return;
    }
    update({ height: Math.max(8, height) });
  };

  return (
    <>
      <PanelSection title={t("transformTitle")}>
        <div className="grid grid-cols-2 gap-2">
          <PropertyNumberInput
            label="X"
            value={layer.x}
            onChange={(x) => update({ x })}
          />
          <PropertyNumberInput
            label="Y"
            value={layer.y}
            onChange={(y) => update({ y })}
          />
        </div>
        <div className="flex items-end gap-2">
          <div className="grid flex-1 grid-cols-2 gap-2">
            <PropertyNumberInput
              label={t("widthLabel")}
              value={layer.width}
              min={8}
              onChange={setWidth}
            />
            <PropertyNumberInput
              label={t("heightLabel")}
              value={layer.height}
              min={8}
              onChange={setHeight}
            />
          </div>
          <AspectRatioLockButton
            locked={aspectLocked}
            onToggle={() => {
              setAspectLocked((locked) => {
                if (!locked) {
                  aspectRatioRef.current = layer.width / layer.height || 1;
                }
                return !locked;
              });
            }}
          />
        </div>
        <PropertyNumberInput
          label={t("rotationLabel")}
          value={layer.rotation}
          onChange={(rotation) => update({ rotation })}
        />
      </PanelSection>

      <PanelSection title={t("layerOrderTitle")}>
        <div className="grid grid-cols-2 gap-2">
          <button
            type="button"
            onClick={() => moveLayerToFront(layer.id)}
            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:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          >
            <ArrowUp className="h-3.5 w-3.5" aria-hidden />
            {t("toFront")}
          </button>
          <button
            type="button"
            onClick={() => moveLayerToBack(layer.id)}
            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:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          >
            <ArrowDown className="h-3.5 w-3.5" aria-hidden />
            {t("toBack")}
          </button>
        </div>
      </PanelSection>

      <button
        type="button"
        onClick={() => deleteLayer(layer.id)}
        className="flex w-full items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-xs font-medium text-red-500 transition-colors hover:border-red-300 hover:bg-red-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500"
      >
        <Trash2 className="h-3.5 w-3.5" aria-hidden />
        {t("deleteLayer")}
      </button>
    </>
  );
}