import React from 'react';
import './nodetype.less';

import { Select, Form, InputNumber, Radio, Row, Col } from 'antd';

export interface LabeledValue {
  key?: string;
  value: string;
  label: React.ReactNode;
}

export interface IProps {
  onChangeDataType?: ((value: string, option: object) => void) | undefined;
  optionlist?: Array<LabeledValue>;
  optionvalue?: string;
  placeholder?: string | React.ReactNode;
  onChange?: (option: object) => void;
  dataJson?: any;
  disabled?: boolean;
}

const NodeType: React.FC<IProps> = (props: IProps) => {
  const { Option } = Select;

  const {
    onChangeDataType,
    onChange,
    optionlist,
    optionvalue,
    placeholder,
    dataJson,
    disabled,
  } = props;

  const {
    maxlength,
    datetype,
    format,
    precision,
    min,
    max,
    styletype,
  } = dataJson;

  const handleChange = (value: string) => {
    let jsons: any = {
      text: { maxlength: 50, textvalue: `${value}(50)` },
      date: {
        datetype: 'current',
        format: 'YYYY-MM-DD HH:mm:ss',
        textvalue: `${value}(current, YYYY-MM-DD HH:mm:ss)`,
      },
      number: {
        precision: 2,
        min: 0,
        max: 999999,
        textvalue: `${value}(2,0,999999)`,
      },
      images: { min: 0, max: 6, textvalue: `${value}(0,6)` },
      radio: { styletype: 'radio', textvalue: `${value}(radio)` },
      checkbox: {
        styletype: 'checkbox',
        min: 0,
        max: 2,
        textvalue: `${value}(checkbox,0,2)`,
      },
      richtext: { maxlength: 50, textvalue: `${value}(50)` },
    };
    let option: object = jsons[value];
    if (onChangeDataType) onChangeDataType(value, option);
  };

  const handleChange2 = (type: string, e: any) => {
    let value = null;
    if (type === 'datetype' || type === 'styletype') value = e.target.value;
    else value = e;

    let newdata = dataJson;
    delete newdata.textvalue;
    newdata[type] = value;
    let newtextvalue = '';
    let textvaluearray: Array<{}> = [];
    for (let key in newdata) {
      textvaluearray.push(newdata[key]);
    }

    newtextvalue = `${optionvalue}(${textvaluearray.join(',')})`;

    let option: Object = { ...newdata, textvalue: newtextvalue };

    if (onChange) onChange(option);
  };

  function getviews() {
    let views = <div />;
    switch (optionvalue) {
      case 'text':
        views = (
          <Col span={24}>
            <Form.Item label="最大长度" style={{ margin: 0 }}>
              <InputNumber
                onChange={handleChange2.bind(null, 'maxlength')}
                placeholder="0"
                min={0}
                precision={0}
                step={1}
                value={maxlength}
              />
            </Form.Item>
          </Col>
        );
        break;
      case 'date':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="日期" style={{ margin: '0px' }}>
                <Radio.Group
                  onChange={handleChange2.bind(null, 'datetype')}
                  value={datetype}
                >
                  <Radio value="current">当前日期</Radio>
                  <Radio value="assign">指定日期</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="格式" style={{ margin: 0 }}>
                <Select
                  allowClear
                  style={{ width: 270 }}
                  onChange={handleChange2.bind(null, 'format')}
                  value={format}
                  placeholder="请选择"
                >
                  <Option value="YYYY-MM-DD HH:mm:ss">年-月-日 时:分:秒</Option>
                  <Option value="YYYY-MM-DD">年-月-日</Option>
                  <Option value="HH:mm:ss">时:分:秒</Option>
                  <Option value="YYYY">年</Option>
                </Select>
              </Form.Item>
            </Col>
          </>
        );
        break;
      case 'number':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="数值精度" style={{ margin: '0px' }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'precision')}
                  value={precision}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="最&nbsp;&nbsp;小&nbsp;&nbsp;值"
                style={{ margin: '0px' }}
              >
                <InputNumber
                  onChange={handleChange2.bind(null, 'min')}
                  value={min}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="最&nbsp;&nbsp;大&nbsp;&nbsp;值"
                style={{ margin: 0 }}
              >
                <InputNumber
                  onChange={handleChange2.bind(null, 'max')}
                  value={max}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
          </>
        );
        break;
      case 'images':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="最少张数" style={{ margin: '0px' }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'min')}
                  value={min}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="最多张数" style={{ margin: 0 }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'max')}
                  value={max}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
          </>
        );
        break;
      case 'checkbox':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="样式" style={{ margin: '0px' }}>
                <Radio.Group
                  onChange={handleChange2.bind(null, 'styletype')}
                  value={styletype}
                >
                  <Radio value={'checkbox'}>多选框</Radio>
                  <Radio value={'select'}>下拉多选</Radio>
                  <Radio value={'treeselect'}>树选择</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="最少选择" style={{ margin: '0px' }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'min')}
                  value={min}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="最多选择" style={{ margin: 0 }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'max')}
                  value={max}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                />
              </Form.Item>
            </Col>
          </>
        );
        break;
      case 'radio':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="样式" style={{ margin: 0 }}>
                <Radio.Group
                  onChange={handleChange2.bind(null, 'styletype')}
                  value={styletype}
                >
                  <Radio value={'radio'}>单选框</Radio>
                  <Radio value={'select'}>下拉单选</Radio>
                  <Radio value={'cascader'}>级联选择</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </>
        );
        break;
      case 'richtext':
        views = (
          <>
            <Col span={24}>
              <Form.Item label="最大长度" style={{ margin: 0 }}>
                <InputNumber
                  onChange={handleChange2.bind(null, 'maxlength')}
                  placeholder="0"
                  min={0}
                  precision={0}
                  step={1}
                  value={maxlength}
                />
              </Form.Item>
            </Col>
          </>
        );
        break;
    }
    return views;
  }

  return (
    <div className="frame-warp">
      <Select
        allowClear
        disabled={disabled}
        style={{ width: 270 }}
        placeholder={placeholder ? placeholder : '请选择'}
        optionFilterProp="children"
        onChange={handleChange}
        value={optionvalue !== '' ? optionvalue : undefined}
      >
        {optionlist
          ? optionlist.map(item => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))
          : null}
      </Select>
      {optionvalue && optionvalue !== ' ' ? (
        <div className="type-edit-box">
          <Form>
            <Row gutter={[10, 10]}>{getviews()}</Row>
          </Form>
        </div>
      ) : null}
    </div>
  );
};

export default NodeType;