import React, { useState, useCallback } from 'react';
import { Input, Select } from '@easyv/antd';
import message from 'components/message';
import classNames from 'classnames';
import ConfirmModal from '../../components/ConfirmModal';
import styles from './CreateModal.less';

const { Option } = Select;
const devices = [
  {
    name: 'iPad',
    icon: 'icon-icon_pad1'
  },
  {
    name: '手机',
    icon: 'icon-icon_phone1'
  },
  {
    name: '自定义',
    icon: 'icon-icon_custom1'
  }
];

const ipadRatios = ['768*1024', '1024*1366'];
const mobileRatios = ['750*1334', '1080*1920', '1024*1366'];

export default function CreateModal({ visible, confirmLoading, onClose, onOk }) {
  const [name, setName] = useState<string>();
  const [type, setType] = useState(0);
  const [ratio, setRatio] = useState(ipadRatios[0]);
  const [width, setWidth] = useState(1024);
  const [height, setHeight] = useState(768);

  const onDeviceChange = (value) => {
    if (type !== value) {
      setType(value);
      if (value === 0) {
        setRatio(ipadRatios[0]);
      } else if (value === 1) {
        setRatio(mobileRatios[0]);
      } else {
        setWidth(1024);
        setHeight(768);
      }
    }
  };

  const onWidthChange = useCallback((e) => {
    const value = parseInt(e.target.value);
    setWidth(isNaN(value) ? 0 : value);
  }, []);
  const onHeightChange = useCallback((e) => {
    const value = parseInt(e.target.value);
    setHeight(isNaN(value) ? 0 : value);
  }, []);
  const onSubmit = () => {
    const resultName = name && name.trim();
    if (resultName) {
      onOk({
        name: resultName,
        width: type === 2 ? width : parseInt(ratio.split('*')[0]),
        height: type === 2 ? height : parseInt(ratio.split('*')[1])
      });
    } else {
      message.error('请填写项目名称');
    }

    setName(resultName);
  };

  return (
    <ConfirmModal
      title="新建终端交互项目"
      visible={visible}
      footer={true}
      confirmLoading={confirmLoading}
      onCancel={onClose}
      theme="black"
      onOk={onSubmit}>
      <div className={styles.contentWrapper}>
        <div className={styles.field}>
          <label className={classNames(styles.label, styles.labelRequired)}>项目名称</label>
          <div className={styles.fieldContent}>
            <Input
              value={name}
              style={{ height: 32 }}
              placeholder="请输入应用名称"
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
            />
          </div>
        </div>
        <div className={styles.field}>
          <label className={styles.label}>设备类型</label>
          <div className={styles.device}>
            {devices.map((d, i) => (
              <span key={i} className={classNames(styles.item, { [styles.active]: type === i })} onClick={() => onDeviceChange(i)}>
                {/* <i className={styles[d.icon]} /> */}
                <i className={classNames('icon iconfont ' + d.icon)} />
                <span>{d.name}</span>
              </span>
            ))}
          </div>
        </div>
        <div className={styles.field}>
          <label className={styles.label}>分辨率</label>
          <div className={styles.fieldContent}>
            {type === 2 ? (
              <div className={styles.ratio}>
                <Input value={width} suffix="宽" onChange={onWidthChange} />
                <i className="icon iconfont icon-btn_close" />
                <Input value={height} suffix="高" onChange={onHeightChange} />
                <span className={styles.unit}>px</span>
              </div>
            ) : (
              <Select dropdownClassName={styles.selectDrop} value={ratio} style={{ width: '100%' }} onChange={(value) => setRatio(value)}>
                {type === 0
                  ? ipadRatios.map((d) => (
                      <Option key={d} value={d}>
                        {d}
                      </Option>
                    ))
                  : mobileRatios.map((d) => (
                      <Option key={d} value={d}>
                        {d}
                      </Option>
                    ))}
              </Select>
            )}
          </div>
        </div>
      </div>
    </ConfirmModal>
  );
}
