"use client";

import type { ChartDrawing, DrawingLineStyle } from "@/lib/chart/drawings/types";

type DrawingStylePanelProps = {
  drawing: ChartDrawing;
  onPatch: (patch: Partial<ChartDrawing["style"]>) => void;
};

const LINE_WIDTHS = [1, 2, 3, 4] as const;
const LINE_STYLES: { id: DrawingLineStyle; label: string }[] = [
  { id: "solid", label: "Solid" },
  { id: "dashed", label: "Dashed" },
  { id: "dotted", label: "Dotted" },
];

export function DrawingStylePanel({ drawing, onPatch }: DrawingStylePanelProps) {
  const style = drawing.style;
  const lineStyle = style.lineStyle ?? "solid";
  const isText = drawing.type === "text" || drawing.type === "callout";
  return (
    <div className="drawing-style-panel" role="region" aria-label="Drawing style">
      <span className="drawing-style-label">
        {isText ? "Text" : drawing.type.replace(/_/g, " ")}
      </span>
      <label className="drawing-style-field">
        <span>Color</span>
        <input
          type="color"
          value={style.color}
          onChange={(e) => onPatch({ color: e.target.value })}
        />
      </label>
      {isText ? (
        <label className="drawing-style-field">
          <span>Size</span>
          <select
            value={style.fontSize ?? 14}
            onChange={(e) => onPatch({ fontSize: Number.parseInt(e.target.value, 10) })}
          >
            {[11, 12, 14, 16, 18, 22, 28].map((n) => (
              <option key={n} value={n}>
                {n}px
              </option>
            ))}
          </select>
        </label>
      ) : (
        <>
          <label className="drawing-style-field">
            <span>Width</span>
            <select
              value={style.lineWidth}
              onChange={(e) => onPatch({ lineWidth: Number.parseInt(e.target.value, 10) })}
            >
              {LINE_WIDTHS.map((w) => (
                <option key={w} value={w}>
                  {w}px
                </option>
              ))}
            </select>
          </label>
          <label className="drawing-style-field">
            <span>Line</span>
            <select
              value={lineStyle}
              onChange={(e) => onPatch({ lineStyle: e.target.value as DrawingLineStyle })}
            >
              {LINE_STYLES.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.label}
                </option>
              ))}
            </select>
          </label>
        </>
      )}
    </div>
  );
}