"use client";

import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Italic,
  Underline,
} from "lucide-react";
import { useTranslations } from "next-intl";

import {
  PanelSection,
  PropertyColorInput,
  PropertySelect,
  PropertySlider,
  ToggleIconButton,
} from "@/components/studio/properties/PropertyControls";
import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
import {
  FONT_FAMILY_OPTIONS,
  getTextProps,
  TEXT_ANIMATION_OPTIONS,
  type TextAlign,
  type TextAnimation,
} from "@/lib/studio-layer-props";
import type { Layer } from "@/lib/studio-types";

interface TextLayerPropertiesProps {
  layer: Layer;
}

export function TextLayerProperties({ layer }: TextLayerPropertiesProps) {
  const t = useTranslations("auto.componentsStudioPropertiesTextLayerProperties");
  const { update, updateProps } = useLayerUpdater(layer);
  const text = getTextProps(layer.props);

  return (
    <PanelSection title={t("sectionTitle")}>
      <PropertySelect
        label={t("fontFamily")}
        value={text.fontFamily}
        options={FONT_FAMILY_OPTIONS.map((item) => ({
          label: item.label,
          value: item.value,
        }))}
        onChange={(fontFamily) => updateProps({ fontFamily })}
      />
      <PropertySlider
        label={t("fontSize")}
        min={8}
        max={200}
        value={text.fontSize}
        onChange={(fontSize) => updateProps({ fontSize })}
      />
      <div className="flex gap-1">
        <ToggleIconButton
          label={t("bold")}
          active={text.bold}
          onClick={() => updateProps({ bold: !text.bold })}
        >
          <Bold className="h-3.5 w-3.5" />
        </ToggleIconButton>
        <ToggleIconButton
          label={t("italic")}
          active={text.italic}
          onClick={() => updateProps({ italic: !text.italic })}
        >
          <Italic className="h-3.5 w-3.5" />
        </ToggleIconButton>
        <ToggleIconButton
          label={t("underline")}
          active={text.underline}
          onClick={() => updateProps({ underline: !text.underline })}
        >
          <Underline className="h-3.5 w-3.5" />
        </ToggleIconButton>
      </div>
      <PropertyColorInput
        label={t("textColor")}
        value={text.fill}
        onChange={(fill) => updateProps({ fill })}
      />
      <div>
        <p className="mb-1 text-[11px] font-medium text-gray-400">{t("alignment")}</p>
        <div className="flex gap-1">
          {(
            [
              { value: "left" as TextAlign, icon: AlignLeft, label: t("alignLeft") },
              {
                value: "center" as TextAlign,
                icon: AlignCenter,
                label: t("alignCenter"),
              },
              { value: "right" as TextAlign, icon: AlignRight, label: t("alignRight") },
            ] as const
          ).map(({ value, icon: Icon, label }) => (
            <ToggleIconButton
              key={value}
              label={label}
              active={text.align === value}
              onClick={() => updateProps({ align: value })}
            >
              <Icon className="h-3.5 w-3.5" />
            </ToggleIconButton>
          ))}
        </div>
      </div>
      <PropertySlider
        label={t("letterSpacing")}
        min={-5}
        max={20}
        step={0.5}
        value={text.letterSpacing}
        onChange={(letterSpacing) => updateProps({ letterSpacing })}
      />
      <PropertySlider
        label={t("lineHeight")}
        min={0.8}
        max={3}
        step={0.1}
        value={text.lineHeight}
        formatValue={(value) => value.toFixed(1)}
        onChange={(lineHeight) => updateProps({ lineHeight })}
      />
      <PropertySlider
        label={t("opacity")}
        min={0}
        max={100}
        value={Math.round(layer.opacity * 100)}
        formatValue={(value) => `${value}%`}
        onChange={(opacity) => update({ opacity: opacity / 100 })}
      />
      <PropertySelect<TextAnimation>
        label={t("animation")}
        value={text.animation}
        options={TEXT_ANIMATION_OPTIONS}
        onChange={(animation) => updateProps({ animation })}
      />
    </PanelSection>
  );
}
