import { h } from 'preact';

interface Props {
  x: number;
  y: number;
  onPick: (type: string) => void;
  onCancel: () => void;
}

const WIDGET_TYPES = [
  { type: 'textview',  label: 'Text View',   desc: 'Live value display' },
  { type: 'gauge',     label: 'Gauge',        desc: 'Circular arc gauge' },
  { type: 'barh',      label: 'Bar (H)',      desc: 'Horizontal bar' },
  { type: 'barv',      label: 'Bar (V)',      desc: 'Vertical bar' },
  { type: 'led',       label: 'LED',          desc: 'State indicator' },
  { type: 'multiled',  label: 'Multi-LED',    desc: 'Bitset indicator' },
  { type: 'setvalue',  label: 'Set Value',    desc: 'Input + write control' },
  { type: 'toggle',    label: 'Toggle Switch', desc: 'On/off switch control' },
  { type: 'button',    label: 'Button',       desc: 'Send command on click' },
  { type: 'plot',      label: 'Plot',         desc: 'Time-series / charts' },
  { type: 'table',     label: 'Table',        desc: 'Multi-signal value table' },
  { type: 'textlabel', label: 'Label',        desc: 'Static text label' },
  { type: 'image',     label: 'Image',        desc: 'Image from URL' },
  { type: 'link',      label: 'Link',         desc: 'Navigate to interface' },
];

export default function WidgetTypePicker({ x, y, onPick, onCancel }: Props) {
  return (
    <div
      class="widget-picker-backdrop"
      onClick={onCancel}
    >
      <div
        class="widget-picker"
        style={`left:${x}px;top:${y}px;`}
        onClick={(e) => e.stopPropagation()}
      >
        <div class="widget-picker-header">
          <span>Choose widget type</span>
          <button class="icon-btn" onClick={onCancel}>✕</button>
        </div>
        <div class="widget-picker-list">
          {WIDGET_TYPES.map(wt => (
            <button
              key={wt.type}
              class="widget-picker-item"
              onClick={() => onPick(wt.type)}
            >
              <span class="wpt-label">{wt.label}</span>
              <span class="wpt-desc">{wt.desc}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
