import React from "react"
import type { StickerItem, TextStickerPreset } from "@/pages/editing-planner/types"
import { TEXT_STICKER_PRESET_LABELS } from "@/pages/editing-planner/constants/sticker"

interface TextStickerPropsEditorProps {
  sticker: StickerItem
  onUpdate: (id: string, partial: Partial<StickerItem>) => void
}

export const TextStickerPropsEditor: React.FC<TextStickerPropsEditorProps> = ({
  sticker,
  onUpdate,
}) => {
  if (sticker.type !== "text") return null

  return (
    <>
      <div className="sticker-prop-row">
        <span className="sticker-prop-label">花字</span>
        <select
          className="sticker-prop-select"
          value={sticker.text_preset}
          onChange={(e) =>
            onUpdate(sticker.id, { text_preset: e.target.value as TextStickerPreset })
          }
        >
          {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
            <option key={p} value={p}>
              {TEXT_STICKER_PRESET_LABELS[p]}
            </option>
          ))}
        </select>
      </div>
      <div className="sticker-prop-row">
        <span className="sticker-prop-label">字号</span>
        <input
          type="range"
          className="sticker-prop-slider"
          min={12}
          max={72}
          value={sticker.font_size}
          onChange={(e) => onUpdate(sticker.id, { font_size: Number(e.target.value) })}
        />
        <span className="sticker-prop-value">{sticker.font_size}px</span>
      </div>
      <div className="sticker-prop-row">
        <span className="sticker-prop-label">颜色</span>
        <input
          type="color"
          className="sticker-prop-color"
          value={sticker.text_color}
          onChange={(e) => onUpdate(sticker.id, { text_color: e.target.value })}
        />
      </div>
    </>
  )
}