import React, { Fragment, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Form, Input, InputNumber } from '@easyv/antd';
import message from 'components/message';
import { testDatabaseConnect } from 'models/source';
import { objectValueTrim } from 'utils/utils';
import EasyvButton from 'components/EasyvButton';

const FormItem = Form.Item;

interface OracelValue {
  host?: string;
  port?: number | string;
  user?: string;
  addr?: string;
  password?: string;
  database?: string;
  id?: number | string;
}

function DB2Form({
  value = {},
  dispatch,
  onPassword,
  setPassedTest,
  type,
  isEdit = false
}: {
  onPassword?: Function;
  value?: OracelValue;
  setPassedTest: (x) => void;
  dispatch: Function;
  type: 'string';
  isEdit:boolean;
}) {
  const [_value, setValue] = useState<OracelValue>(value);
  const [testing, setTesting] = useState(false);

  const testDataSourceConnection = async () => {
    setTesting(true);
    const result = await dispatch(testDatabaseConnect(objectValueTrim({ type, ..._value })));
    setTesting(false);

    if (result) {
      message.success('连接成功');
      setPassedTest(true);
    }
  };

  const handleChange = (name) => (e) => {
    const value = e.target.value.trim();
    setValue((prev) => ({ ...prev, [name]: value }));
  };

  const handleNumChange = (name) => (value) => {
    setValue((prev) => ({ ...prev, [name]: value }));
  };

  const getDatabaseDisabled =
    !_value.host || !_value.port || !_value.user || !_value.database || isEdit ? false :!_value.password;
  const testConnectDisabled = getDatabaseDisabled || testing;

  return (
    <Fragment>
      <FormItem
        label="连接地址"
        name="host"
        rules={[{ required: true, message: '请输入连接地址!', whitespace: true }]}>
        <Input onChange={handleChange('host')} placeholder="请输入数据源连接地址" />
      </FormItem>
      <FormItem
        label="端口"
        name="port"
        rules={[{ required: true, message: '请输入端口!', whitespace: true, type: 'number' }]}>
        <InputNumber placeholder="请输入数据源端口" onChange={handleNumChange('port')} />
      </FormItem>
      <FormItem
        label="用户名"
        name="user"
        rules={[{ required: true, message: '请输入用户名!', whitespace: true }]}>
        <Input onChange={handleChange('user')} placeholder="请输入数据源用户名" />
      </FormItem>
      <FormItem
        label="密码"
        name="password"
        rules={[{ required: isEdit ? false : true, message: '请输入密码!', whitespace: true }]}>
        <Input
          type="password"
          placeholder="请输入数据源密码"
          onFocus={(e: any) => {
            onPassword && onPassword(e);
          }}
          onBlur={(e: any) => {
            onPassword && onPassword(e);
          }}
          onChange={handleChange('password')}
        />
      </FormItem>

      <FormItem
        colon={false}
        label="DataBase"
        style={{ marginBottom: 8 }}
        name="database"
        rules={[{ required: true, message: '请输入数据库', whitespace: true }]}>
        <Input placeholder="请输入数据库" onChange={handleChange('database')} />
      </FormItem>

      <FormItem colon={false} label="  ">
        <EasyvButton
          theme="default"
          style={{ width: 104 }}
          onClick={testDataSourceConnection}
          disabled={testConnectDisabled}>
          {testing ? '正在连接' : '测试连接'}
        </EasyvButton>
      </FormItem>
    </Fragment>
  );
}

export default connect()(DB2Form);
