import { Input } from '@/component/ui/input'
import { ElementDefinition } from '@/entitiy/element/model/interface'
import { Hash } from 'lucide-react'

interface NumberConfig {
  placeholder?: string
  required?: boolean
  targetCells: any[]
}

export const numberDefinition: ElementDefinition<NumberConfig, number> = {
  type: 'number',
  label: 'Число',
  icon: <Hash className="h-4 w-4" />,
  version: 1,
  defaultConfig: {
    placeholder: '',
    required: false,
    targetCells: [],
  },
  mapToCells: config => config.targetCells || [],
  mapToCellValues: (config, value) => {
    const cells = config.targetCells || []
    return cells.map(target => ({ target, value: value || 0 }))
  },
  Editor: () => (
    <div className="text-sm text-gray-600">
      Дополнительные настройки отсутствуют
    </div>
  ),
  Preview: ({ config }) => (
    <div className="space-y-3">
      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
      <div className="rounded-lg border border-gray-200 bg-white p-4">
        <Input
          type="number"
          placeholder={config.placeholder || '0'}
          disabled
          className="w-full"
        />
      </div>
    </div>
  ),
  Render: ({ config, value, onChange }) => (
    <Input
      type="number"
      placeholder={config.placeholder || '0'}
      value={value || ''}
      onChange={e => onChange?.(parseFloat(e.target.value) || 0)}
      required={config.required}
    />
  ),
}