/**
 * 图片关联表单组件 - 与预览组件配合的布局
 * 自适应右侧表单区域，确保与左侧预览协调
 */
import React from 'react';
import EditableField from './EditableField';
import WeatherSelect from './weatherselect.js';

const SHOOTING_METHOD_OPTIONS = [
  'MANUAL', 'AUTO', 'TRIPOD', 'DRONE', 'ROBOT'
];

const LinkForm = ({ formData, image, onChange, onSubmit, loading }) => {
  return (
    <div className="link-form-container">
      {/* 表单标题 */}
      <div className="form-header">
        <h3>图片关联信息</h3>
        <div className="image-meta">
          <span>{image.imageName}</span>
          <span>{image.imageWidth}×{image.imageHeight}</span>
        </div>
      </div>

      {/* 自适应表单网格 */}
      <div className="form-grid">
        {/* 第一组：核心信息 */}
        <div className="form-group">
          <div className="form-row">
            <EditableField 
              label="部件ID" 
              value={formData.partId} 
              fieldName="partId"
              onChange={onChange}
              fullWidth
            />
          </div>
          <div className="form-row">
            <EditableField 
              label="采集员ID" 
              value={formData.collectorId} 
              fieldName="collectorId"
              onChange={onChange}
            />
            <EditableField 
              label="姓名" 
              value={formData.collectorName} 
              fieldName="collectorName"
              onChange={onChange}
            />
          </div>
        </div>

        {/* 第二组：拍摄信息 */}
        <div className="form-group">
          <div className="form-row">
            <WeatherSelect
              value={formData.weather}
              onChange={value => onChange('weather', value)}
            />
            <div className="form-item">
              <label>拍摄方式</label>
              <select
                value={formData.shootingMethod}
                onChange={(e) => onChange('shootingMethod', e.target.value)}
              >
                <option value="">选择方式</option>
                {SHOOTING_METHOD_OPTIONS.map(method => (
                  <option key={method} value={method}>{method}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="form-row">
            <EditableField 
              label="拍摄距离" 
              value={formData.shootingDistance} 
              fieldName="shootingDistance"
              onChange={onChange}
              type="number"
              suffix="米"
            />
          </div>
        </div>

        {/* 第三组：环境信息 */}
        <div className="form-group">
          <div className="form-row">
            <EditableField 
              label="最低温" 
              value={formData.temperatureMin} 
              fieldName="temperatureMin"
              onChange={onChange}
              type="number"
              suffix="°C"
            />
            <EditableField 
              label="最高温" 
              value={formData.temperatureMax} 
              fieldName="temperatureMax"
              onChange={onChange}
              type="number"
              suffix="°C"
            />
          </div>
          <div className="form-row">
            <EditableField 
              label="湿度" 
              value={formData.humidness} 
              fieldName="humidness"
              onChange={onChange}
              type="number"
              suffix="%"
            />
            <EditableField 
              label="风力" 
              value={formData.windLevel} 
              fieldName="windLevel"
              onChange={onChange}
              type="number"
              suffix="级"
            />
          </div>
        </div>

        {/* 第四组：时间信息 */}
        <div className="form-group">
          <div className="form-row">
            <EditableField 
              label="开始时间" 
              value={formData.shootingTimeBegin} 
              fieldName="shootingTimeBegin"
              onChange={onChange}
              type="datetime-local"
              fullWidth
            />
          </div>
          <div className="form-row">
            <EditableField 
              label="结束时间" 
              value={formData.shootingTimeEnd} 
              fieldName="shootingTimeEnd"
              onChange={onChange}
              type="datetime-local"
              fullWidth
            />
          </div>
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="form-actions">
        <button 
          onClick={onSubmit} 
          disabled={loading}
          className="submit-button"
        >
          {loading ? '提交中...' : '保存关联信息'}
        </button>
      </div>
    </div>
  );
};

export default LinkForm;