import type { DiagramSettings } from '@diagram/settings'
import { COLOR_SCHEMES } from '@diagram/relations'

interface Props {
  settings: DiagramSettings
  onChange: (patch: Partial<DiagramSettings>) => void
  onClose: () => void
}

export function SettingsDialog({ settings, onChange, onClose }: Props): JSX.Element {
  return (
    <div className="dialog-backdrop" onClick={onClose}>
      <div className="dialog" onClick={(e) => e.stopPropagation()}>
        <h3>Diagram settings</h3>

        <div className="prop-row">
          <label>Grid size (px)</label>
          <input
            type="number"
            min={4}
            max={64}
            step={2}
            value={settings.gridSize}
            onChange={(e) => onChange({ gridSize: Number(e.target.value) || 16 })}
          />
        </div>
        <div className="prop-row">
          <label>Snap to grid</label>
          <input
            type="checkbox"
            checked={settings.snapToGrid}
            onChange={(e) => onChange({ snapToGrid: e.target.checked })}
          />
        </div>
        <div className="prop-row">
          <label>Show grid</label>
          <input
            type="checkbox"
            checked={settings.showGrid}
            onChange={(e) => onChange({ showGrid: e.target.checked })}
          />
        </div>
        <div className="prop-row">
          <label>Arc on line crossings</label>
          <input
            type="checkbox"
            checked={settings.jumpover}
            onChange={(e) => onChange({ jumpover: e.target.checked })}
          />
        </div>
        <div className="prop-row">
          <label>Color scheme</label>
          <select
            value={settings.colorScheme}
            onChange={(e) => onChange({ colorScheme: e.target.value })}
          >
            {COLOR_SCHEMES.map((s) => (
              <option key={s.id} value={s.id}>
                {s.label}
              </option>
            ))}
          </select>
        </div>
        <div className="prop-row">
          <label>Theme</label>
          <select
            value={settings.theme}
            onChange={(e) => onChange({ theme: e.target.value as DiagramSettings['theme'] })}
          >
            <option value="dark">Dark</option>
            <option value="light">Light</option>
          </select>
        </div>

        <div className="actions">
          <button className="primary" onClick={onClose}>Done</button>
        </div>
      </div>
    </div>
  )
}