import React from 'react';
import {
  FormContainer,
  FormDatetimePicker,
  FormNumberInput,
  Input,
  IStepForm,
  Select,
  useWizard
} from './form';
import { JsonSchemaDrawer } from './drawer';

export namespace Step4 {
  export const KEY = 'step4';
  export const TITLE = '设置同步参数';

  export interface IForm {
    route: string;
    block: string;
    timeout: number;
    retry: number;
    startTime: string;
    timeField: string;
    shardField: string;
    timeRule: string;
    taskName: string;
  }

  export const Form: React.FunctionComponent<IStepForm<IForm>> = props => {
    const { wizardData, formProps } = useWizard(props);
    const { watch } = formProps;
    const formData = watch();

    const drawer = (
      <JsonSchemaDrawer jsonSchema={{ ...wizardData, [KEY]: formData }} />
    );

    return (
      <FormContainer
        formProps={formProps}
        drawerLabel="构建预览"
        drawer={drawer}
        darkDrawer
      >
        <Select<IForm>
          label="路由策略"
          name="route"
          options={[{ label: '第一个', value: 'first' }]}
          required
        />
        <Select<IForm>
          label="阻塞处理方式"
          name="block"
          options={[{ label: '单机串行', value: 'single' }]}
          required
        />
        <FormNumberInput<IForm>
          label="超时时间"
          name="timeout"
          positive
          required
        />
        <FormNumberInput<IForm>
          label="失败重试次数"
          name="retry"
          positive
          required
        />
        <FormDatetimePicker<IForm>
          label="增量开始时间"
          name="startTime"
          required
        />
        <Input<IForm>
          label="增量时间字段"
          name="timeField"
          placeholder="-DlastTime='%s' -DcurrentTime='%s'"
        />
        <Input<IForm>
          label="分区字段"
          name="shardField"
          placeholder="分区字段"
        />
        <Input<IForm>
          label="定时规则"
          name="timeRule"
          placeholder="0 0/2***?"
          required
        />
        <Input<IForm>
          label="同步任务名称"
          name="taskName"
          placeholder="同步任务名称"
          required
        />
      </FormContainer>
    );
  };
}
