import React, { useState } from 'react';
import useEffectOnce from 'react-use/lib/useEffectOnce';
import { Form, Button, Select, InputNumber, DatePicker } from 'antd';
import TimeSelect from './TimeSelect';
import dayjs from 'dayjs';

const { Option } = Select;

export enum AxisType {
  Iter = 'iter',
  Time = 'time',
  Relative = 'relative',
}

interface DataRangeSchema {
  x: {
    startValue: number;
    endValue: number;
  };
  y: {
    startValue: number;
    endValue: number;
  };
}

interface DefaultValueSchema {
  axisType: AxisType;
  startValue: number;
  endValue: number;
}

export const AxisForm: React.FC<{
  onOk: (axisType: AxisType, startValue: number, endValue: number) => void;
  onCancel: () => void;
  getDataRange?: (axisType: AxisType) => DataRangeSchema;
  defaultValue?: DefaultValueSchema;
  isMetric: boolean;
}> = props => {
  const [axisType, setAxisType] = useState<AxisType>(AxisType.Iter);
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    const { axisType } = values;
    let { startValue, endValue } = values;
    if (axisType === AxisType.Time) {
      startValue = Number(dayjs(startValue).unix() + '000');
      endValue = Number(dayjs(endValue).unix() + '000');
    }
    props.onOk(axisType, startValue, endValue);
    props.onCancel();
  };
  useEffectOnce(() => {
    const { axisType, startValue, endValue } = props.defaultValue || {};
    if (
      props.defaultValue &&
      startValue !== undefined &&
      endValue !== undefined
    ) {
      setAxisType(axisType as AxisType);
      if (axisType === AxisType.Time) {
        form.setFieldsValue({
          axisType: axisType,
          startValue: dayjs(startValue),
          endValue: dayjs(endValue),
        });
      } else {
        form.setFieldsValue({
          axisType: axisType,
          startValue: startValue,
          endValue: endValue,
        });
      }
    } else if (props.getDataRange) {
      const dataRange = props.getDataRange(AxisType.Iter);
      setAxisType(AxisType.Iter);
      form.setFieldsValue({
        axisType: AxisType.Iter,
        startValue: dataRange.x.startValue,
        endValue: dataRange.x.endValue,
      });
    } else {
      setAxisType(AxisType.Iter);
      form.setFieldsValue({
        axisType: AxisType.Iter,
      });
    }
  });
  const onAxisTypeChange = (value: AxisType) => {
    setAxisType(value);
    if (props.getDataRange) {
      const dataRange = props.getDataRange(value);
      if (value === AxisType.Time) {
        form.setFieldsValue({
          startValue: dayjs(dataRange.x.startValue),
          endValue: dayjs(dataRange.x.endValue),
        });
      } else {
        form.setFieldsValue({
          startValue: dataRange.x.startValue,
          endValue: dataRange.x.endValue,
        });
      }
    } else {
      if (value === AxisType.Relative) {
        form.setFieldsValue({
          startValue: 0,
          endValue: 0,
        });
      } else {
        form.setFieldsValue({ startValue: undefined, endValue: undefined });
      }
    }
  };
  return (
    <Form
      form={form}
      name='axis form'
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 19 }}
      onFinish={onFinish}
    >
      <Form.Item
        label='Choose axis'
        name='axisType'
        rules={[{ required: true, message: 'Please choose axis' }]}
      >
        <Select
          getPopupContainer={node => node.parentElement || document.body}
          onChange={onAxisTypeChange}
        >
          <Option value={AxisType.Iter}>
            {props.isMetric ? 'epoch' : 'iteration'}
          </Option>
          <Option value={AxisType.Time}>time</Option>
          <Option value={AxisType.Relative}>relative time</Option>
        </Select>
      </Form.Item>
      <Form.Item
        label='Range'
        name='range'
        initialValue='range' // 没有用，只是为了触发required和自定义校验，又不因为这个item报错
        dependencies={['axisType']}
        rules={[
          { required: true },
          ({ getFieldValue }) => ({
            validator(_, value) {
              const axisType = getFieldValue('axisType');
              let startValue = getFieldValue('startValue');
              let endValue = getFieldValue('endValue');
              if (axisType === AxisType.Time) {
                startValue = startValue
                  ? dayjs(startValue).unix() + '000'
                  : startValue;
                endValue = endValue ? dayjs(endValue).unix() + '999' : endValue;
              }
              if (
                startValue === undefined ||
                endValue === undefined ||
                startValue === null ||
                endValue === null
              ) {
                return Promise.reject(new Error('Range can not be empty'));
              } else if (startValue >= endValue) {
                return Promise.reject(
                  new Error(
                    'The maximum value must  be greater than the minimum value',
                  ),
                );
              } else if (
                axisType === AxisType.Relative &&
                startValue < 1000 &&
                endValue < 1000
              ) {
                return Promise.reject(
                  new Error(
                    'The maximum value must  be greater than the minimum value',
                  ),
                );
              }
              if (props.getDataRange) {
                const dataRange = props.getDataRange(axisType);
                let minValue = dataRange.x.startValue;
                let maxValue = dataRange.x.endValue;
                if (axisType === AxisType.Time) {
                  minValue = Number(dayjs(minValue).unix() + '000');
                  maxValue = Number(dayjs(maxValue).unix() + '999');
                }
                if (minValue !== undefined && startValue < minValue) {
                  return Promise.reject(new Error('Out of Range'));
                }
                if (maxValue !== undefined && endValue > maxValue) {
                  return Promise.reject(new Error('Out of Range'));
                }
              }
              return Promise.resolve();
            },
          }),
        ]}
      >
        {axisType === AxisType.Iter ? (
          <React.Fragment>
            <Form.Item
              name='startValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              <InputNumber
                min={0}
                step={1}
                precision={0}
                style={{ width: '100%' }}
                placeholder={'Input iteration'}
              />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '24px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              to
            </span>
            <Form.Item
              name='endValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              <InputNumber
                min={0}
                step={1}
                precision={0}
                style={{ width: '100%' }}
                placeholder={'Input iteration'}
              />
            </Form.Item>
          </React.Fragment>
        ) : axisType === AxisType.Time ? (
          <React.Fragment>
            <Form.Item
              name='startValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              {/* @ts-ignore */}
              <DatePicker
                getPopupContainer={node => node.parentElement || document.body}
                showTime
                style={{ width: '100%' }}
              />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '24px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              to
            </span>
            <Form.Item
              name='endValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              {/* @ts-ignore */}
              <DatePicker
                getPopupContainer={node => node.parentElement || document.body}
                showTime
                style={{ width: '100%' }}
              />
            </Form.Item>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <Form.Item
              name='startValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              <TimeSelect style={{ width: '100%' }} />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '24px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              to
            </span>
            <Form.Item
              name='endValue'
              style={{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginBottom: 0,
              }}
            >
              <TimeSelect style={{ width: '100%' }} />
            </Form.Item>
          </React.Fragment>
        )}
      </Form.Item>
    </Form>
  );
};
export default AxisForm;