// ============================================================
// simple-widgets — 简单输入控件集合
// 合并自 Checkbox.tsx + LineInput.tsx + TextInput.tsx +
//            ComboBox.tsx + SpinBox.tsx + DoubleSpinBox.tsx
//
// 这些控件都是对应 antd 组件的薄包装（10-24 行），
// 统一 WidgetProps 接口以注册到 WIDGET_MAP。
// ============================================================

import { Input, InputNumber, Select, Switch } from 'antd';
import type { WidgetProps } from './types';
import { normalizeSizeDisplay } from '@/shared/utils/size-format';

// ════ Checkbox (checkbox → Switch) ════

export function Checkbox({ value, onChange, disabled }: WidgetProps) {
   return (
      <Switch
         checked={value as boolean}
         onChange={(v) => onChange?.(v)}
         disabled={disabled}
      />
   );
}

// ════ LineInput (lineEdit → Input) ════

export function LineInput({ value, onChange, disabled, config }: WidgetProps) {
   return (
      <Input
         value={value as string}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled}
         placeholder={(config.placeholder as string) || '请输入'}
         maxLength={config.maxLength as number | undefined}
         allowClear
      />
   );
}

// ════ TextInput (textEdit → Input.TextArea) ════

const { TextArea } = Input;

export function TextInput({ value, onChange, disabled, config }: WidgetProps) {
   return (
      <TextArea
         rows={4}
         value={value as string}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled}
         placeholder={(config.placeholder as string) || '请输入'}
         maxLength={config.maxLength as number | undefined}
         showCount={config.maxLength !== undefined}
      />
   );
}

// ════ ComboBox (comboBox → Select) ════

export function ComboBox({ value, onChange, disabled, config }: WidgetProps) {
   const enumValues = config.enumValues as string[] | undefined;
   const rawOptions = enumValues?.map((v) => ({ label: v, value: v })) || [];
   // 统一尺寸显示格式：将像素值（1024x2048）/宽高比统一为简化宽高比
   const options = normalizeSizeDisplay(rawOptions);

   return (
      <Select
         value={value as string}
         onChange={(v) => onChange?.(v)}
         disabled={disabled}
         placeholder={(config.placeholder as string) || '请选择'}
         options={options}
         allowClear={!config.required}
         style={{ width: '100%' }}
      />
   );
}

// ════ SpinBox (spinBox → InputNumber, step=1) ════

export function SpinBox({ value, onChange, disabled, config }: WidgetProps) {
   return (
      <InputNumber
         value={value as number}
         onChange={(v) => onChange?.(v != null ? v : undefined)}
         disabled={disabled}
         min={config.minValue as number | undefined}
         max={config.maxValue as number | undefined}
         step={1}
         style={{ width: '100%', minWidth: 140 }}
         placeholder={(config.placeholder as string) || undefined}
         controls
      />
   );
}

// ════ DoubleSpinBox (doubleSpinBox → InputNumber, step=config.step) ════

export function DoubleSpinBox({ value, onChange, disabled, config }: WidgetProps) {
   return (
      <InputNumber
         value={value as number}
         onChange={(v) => onChange?.(v != null ? v : undefined)}
         disabled={disabled}
         min={config.minValue as number | undefined}
         max={config.maxValue as number | undefined}
         step={config.step as number || 0.1}
         style={{ width: '100%', minWidth: 140 }}
         placeholder={(config.placeholder as string) || undefined}
         controls
      />
   );
}
