"use client";

import { Bold, Italic } from "lucide-react";
import { useTranslations } from "next-intl";

import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
import { ToggleIconButton } from "@/components/studio/properties/PropertyControls";
import { FONT_FAMILY_OPTIONS, getTextProps } from "@/lib/studio-layer-props";
import type { Layer } from "@/lib/studio-types";
import { cn } from "@/lib/utils";

interface StudioTopBarTextControlsProps {
  layer: Layer;
  className?: string;
}

export function StudioTopBarTextControls({
  layer,
  className,
}: StudioTopBarTextControlsProps) {
  const { updateProps } = useLayerUpdater(layer);
  const text = getTextProps(layer.props);
  const t = useTranslations("auto.componentsStudioVideoStudioTopBarTextControls");

  return (
    <div
      className={cn(
        "flex items-center gap-1.5 border-r border-gray-200 pr-2",
        className
      )}
      role="group"
      aria-label={t("groupLabel")}
    >
      <select
        value={text.fontFamily}
        onChange={(event) => updateProps({ fontFamily: event.target.value })}
        aria-label={t("fontFamily")}
        className="h-8 max-w-[110px] rounded-md border border-gray-200 bg-gray-50 px-2 text-xs text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      >
        {FONT_FAMILY_OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      <input
        type="number"
        min={8}
        max={200}
        value={text.fontSize}
        onChange={(event) => {
          const next = Number(event.target.value);
          if (!Number.isNaN(next)) updateProps({ fontSize: next });
        }}
        aria-label={t("fontSize")}
        className="h-8 w-14 rounded-md border border-gray-200 bg-gray-50 px-2 text-xs tabular-nums text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      />

      <div className="flex gap-0.5">
        <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>
      </div>

      <input
        type="color"
        value={text.fill}
        onChange={(event) => updateProps({ fill: event.target.value })}
        aria-label={t("textColor")}
        className="h-8 w-8 cursor-pointer rounded border border-gray-200 bg-gray-50 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
      />
    </div>
  );
}
