import { useEffect, useState } from "react";
import type { CanvasState } from "@dada/shared-contracts";

type CanvasElement = CanvasState["elements"][number];

export function DynamicInspector(props: { element: CanvasElement; onCommit: (value: string) => void }) {
  const [value, setValue] = useState(props.element.formatted_value ?? "");
  useEffect(() => setValue(props.element.formatted_value ?? ""), [props.element.element_id, props.element.formatted_value]);
  return <section className="editor-dynamic-inspector">
    {props.element.template_or_asset_id === "DYN012" ? <p className="editor-font-substitution" role="note">原 DIN_MediumAlternate.otf 缺失，当前明确使用 FONT081 · Lexend Deca 替代。</p> : null}
    <label>显示文字<textarea aria-label="动态贴纸显示文字" onChange={(event) => setValue(event.target.value)} value={value} /></label>
    <button className="editor-wide-command" disabled={!value.trim() || value === props.element.formatted_value} onClick={() => props.onCommit(value)} type="button">应用显示文字</button>
  </section>;
}