/**
 * 代码编辑器字段属性配置组件
 */

import React from 'react';
import { Form, Input, InputNumber, Select, Switch } from 'antd';
import type { PropertyConfigProps } from '../config';

const CodeEditorPropertyConfig: React.FC<PropertyConfigProps> = ({ field, onChange }) => {
  const handleChange = (key: string, value: any) => {
    onChange({
      ...field,
      [key]: value,
    });
  };

  return (
    <>
      {/* 基础配置 */}
      <Form.Item label="字段标签" required>
        <Input
          value={field.label}
          onChange={(e) => handleChange('label', e.target.value)}
          placeholder="请输入字段标签"
        />
      </Form.Item>

      <Form.Item label="字段名称" required>
        <Input
          value={field.name}
          onChange={(e) => handleChange('name', e.target.value)}
          placeholder="请输入字段名称（英文）"
        />
      </Form.Item>

      {/* 编辑器配置 */}
      {/* 编程语言 */}
      <Form.Item label="编程语言">
        <Select
          value={field.language || 'javascript'}
          onChange={(value) => handleChange('language', value)}
          options={[
            { label: 'JavaScript', value: 'javascript' },
            { label: 'TypeScript', value: 'typescript' },
            { label: 'Python', value: 'python' },
            { label: 'Java', value: 'java' },
            { label: 'Go', value: 'go' },
            { label: 'Groovy', value: 'groovy' },
            { label: 'SQL', value: 'sql' },
            { label: 'JSON', value: 'json' },
            { label: 'XML', value: 'xml' },
            { label: 'YAML', value: 'yaml' },
            { label: 'Markdown', value: 'markdown' },
            { label: 'HTML', value: 'html' },
            { label: 'CSS', value: 'css' },
            { label: 'Shell', value: 'shell' },
          ]}
        />
      </Form.Item>

      {/* 编辑器高度 */}
      <Form.Item label="编辑器高度">
        <InputNumber
          style={{ width: '100%' }}
          value={field.height || 300}
          onChange={(value) => handleChange('height', value || 300)}
          min={100}
          max={1000}
          step={50}
          addonAfter="px"
        />
      </Form.Item>

      {/* 编辑器主题 */}
      <Form.Item label="编辑器主题">
        <Select
          value={field.theme || 'vs-dark'}
          onChange={(value) => handleChange('theme', value)}
          options={[
            { label: '浅色主题', value: 'vs' },
            { label: '深色主题', value: 'vs-dark' },
            { label: '高对比度', value: 'hc-black' },
          ]}
        />
      </Form.Item>

      {/* 占位符文本 */}
      <Form.Item label="占位提示">
        <Input
          value={field.placeholder}
          onChange={(e) => handleChange('placeholder', e.target.value)}
          placeholder="请输入占位提示"
        />
      </Form.Item>

      {/* 基本属性 */}
      <Form.Item label="是否必填">
        <Switch
          checked={field.required || false}
          onChange={(checked) => handleChange('required', checked)}
        />
      </Form.Item>

      <Form.Item label="是否禁用">
        <Switch
          checked={field.disabled || false}
          onChange={(checked) => handleChange('disabled', checked)}
        />
      </Form.Item>

      {/* 编辑器特性 */}
      {/* 显示小地图 */}
      <Form.Item label="显示小地图">
        <Switch
          checked={field.showMinimap !== false}
          onChange={(checked) => handleChange('showMinimap', checked)}
        />
      </Form.Item>

      {/* 显示语言标签 */}
      <Form.Item label="显示语言标签">
        <Switch
          checked={field.showLanguage !== false}
          onChange={(checked) => handleChange('showLanguage', checked)}
        />
      </Form.Item>

      {/* 只读模式 */}
      <Form.Item label="只读模式">
        <Switch
          checked={field.readOnly || false}
          onChange={(checked) => handleChange('readOnly', checked)}
        />
      </Form.Item>
    </>
  );
};

export default CodeEditorPropertyConfig;

