import React from 'react';
import {
  FormContainer,
  Input,
  IStepForm,
  Select,
  Textarea,
  useWizard
} from './form';
import { useTableNames } from './service';
import { TableShemaDrawer } from './drawer';

export namespace Step1 {
  export const KEY = 'step1';
  export const TITLE = '配置提取源';

  interface IMysqlDetail {
    tableName: string;
    field: string;
    pkey: string;
    stmt: string;
  }

  interface IHiveDetail {
    tableName: string;
    path: string;
    hdfs: string;
    filetype: string;
    delim: string;
  }

  export interface IForm {
    dataSource: string;
    detail: IMysqlDetail | IHiveDetail;
  }

  const MysqlDetail: React.FunctionComponent = () => {
    const { data: tableNames } = useTableNames('mysql');

    return (
      <>
        <Select<IForm>
          label="选择表"
          name="detail.tableName"
          options={tableNames ? tableNames.map(value => ({ value })) : []}
          required
        />
        <Textarea<IForm>
          label="查询字段"
          name="detail.field"
          placeholder="SQL查询, 一般用于多表关联查询时才用"
        />
        <Input<IForm> label="切分主键" name="detail.pkey" />
        <Textarea<IForm>
          label="条件语句"
          name="detail.stmt"
          placeholder="where条件"
        />
      </>
    );
  };

  const HiveDetail: React.FunctionComponent = () => {
    const { data: tableNames } = useTableNames('hive');

    return (
      <>
        <Select<IForm>
          label="选择表"
          name="detail.tableName"
          options={tableNames ? tableNames.map(value => ({ value })) : []}
          required
        />
        <Textarea<IForm>
          label="选择路径"
          name="detail.path"
          placeholder="要读取的文件路径，如果要读取多个⽂件，可使用正确的表达式*"
          required
        />
        <Input<IForm>
          label="HDFS"
          name="detail.hdfs"
          placeholder="hdfs namenode节点地址"
          required
        />
        <Select<IForm>
          label="文件类型"
          name="detail.filetype"
          options={[{ value: 'text' }, { value: 'orc' }]}
          required
        />
        <Input<IForm> label="分隔符" name="detail.delim" required />
      </>
    );
  };

  export const Form: React.FunctionComponent<IStepForm<IForm>> = props => {
    const { formProps } = useWizard(props);
    const { watch, resetField, setValue } = formProps;
    const dataSource = watch('dataSource');
    const tableName = watch('detail.tableName');

    const resetDetail = () => {
      resetField('detail');
      setValue('detail.tableName', '');
    };

    let detail: JSX.Element | null = null;
    if (dataSource === 'mysql') {
      detail = <MysqlDetail />;
    } else if (dataSource === 'hive') {
      detail = <HiveDetail />;
    }

    const drawer = (
      <TableShemaDrawer dataSource={dataSource} tableName={tableName} />
    );

    return (
      <FormContainer
        formProps={formProps}
        drawerLabel="表结构预览"
        drawer={drawer}
      >
        <Select<IForm>
          label="选择数据源"
          name="dataSource"
          options={[
            { label: 'MySQL', value: 'mysql' },
            { label: 'Hive', value: 'hive' }
          ]}
          required
          changeCallback={resetDetail}
        />
        {detail}
      </FormContainer>
    );
  };
}
