import React from 'react';
import { EasySelect, InputOperationNumber, FormGroup, FormItem, Utils } from '@easyv/react-gui';

const { Col } = FormGroup;
const { getValueFromConfig } = Utils;
const recommendOptions = [
  { name: '大屏推荐尺寸1920*1080', value: '0' },
  { name: 'web最常见尺寸1366*768', value: '1' },
  { name: 'web最小尺寸1024*768', value: '2' },
  { name: '自定义', value: '4' }
];

export default function Dimension({ config = [], onChange }) {
  if (config.length === 0) {
    return null;
  }
  const isTerminal = /app\/edit/.test(window.location.pathname); // 是否终端交互模块
  const recommend = getValueFromConfig(config, ['dimension', 'recommend']);
  const width = getValueFromConfig(config, ['dimension', 'width']);
  const height = getValueFromConfig(config, ['dimension', 'height']);

  const handleRecommendChange = (value) => {
    const updates = [{ path: ['dimension', 'recommend'], value: value }];
    if (value === '0') {
      updates.push({ path: ['dimension', 'width'], value: 1920 }, { path: ['dimension', 'height'], value: 1080 });
    } else if (value === '1') {
      updates.push({ path: ['dimension', 'width'], value: 1366 }, { path: ['dimension', 'height'], value: 768 });
    } else if (value === '2') {
      updates.push({ path: ['dimension', 'width'], value: 1024 }, { path: ['dimension', 'height'], value: 768 });
    }
    onChange(updates);
  };

  const handleWidthChange = (value) => {
    const updates = [
      { path: ['dimension', 'width'], value: value },
      { path: ['dimension', 'recommend'], value: '4' }
    ];
    onChange(updates);
  };

  const handleHeightChange = (value) => {
    const updates = [
      { path: ['dimension', 'height'], value: value },
      { path: ['dimension', 'recommend'], value: '4' }
    ];
    onChange(updates);
  };

  return (
    <FormItem label="屏幕大小">
      <FormGroup>
        {recommend != null && (
          <Col span={24}>
            <EasySelect value={recommend} options={recommendOptions} onChange={handleRecommendChange} />
          </Col>
        )}
        <Col span={12}>
          <InputOperationNumber disabled={isTerminal} value={width} onChange={handleWidthChange} suffix="W" />
        </Col>
        <Col span={12}>
          <InputOperationNumber value={height} onChange={handleHeightChange} suffix="H" />
        </Col>
      </FormGroup>
    </FormItem>
  );
}
