import React, { Fragment, useState } from 'react';
import { connect } from 'react-redux';
import { Form, Input, Row, Col, Radio, InputNumber } from '@easyv/antd';
import message from 'components/message';
import { testDatabaseConnect } from 'models/source';
import { objectValueTrim } from 'utils/utils';
import EasyvButton from 'components/EasyvButton';
import styles from './style.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

interface OracelValue {
  host?: string;
  port?: number | string;
  user?: string;
  password?: string;
  serviceName?: string;
  sid?: string;
  id?: number | string;
}

function OracelForm({
  value = {},
  dispatch,
  isEdit=false,
  onPassword,
}: {
  onPassword?: Function;
  value?: OracelValue;
  isEdit:boolean;
  dispatch: Function;
}) {
  const [serverType, setServerType] = useState('sid');
  const [_value, setValue] = useState<OracelValue>(value);
  const [testing, setTesting] = useState(false);

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

    setTesting(false);

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

  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 handleServerTypeChange = (e) => {
    const type = e.target.value;
    setServerType(type);
    setValue((prev: OracelValue) => ({
      ...prev,
      serviceName: type === 'sid' ? undefined : prev.serviceName,
      sid: type === 'server' ? undefined : prev.sid,
    }));
  };
  const getDatabaseDisabled =
    !_value.host ||
    !_value.port ||
    !_value.user ||
    (!_value.sid && !_value.serviceName) ||
    (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 ? true : false, message: '请输入密码!', whitespace: true }]}>
        <Input
          type="password"
          placeholder="请输入数据源密码"
          onFocus={(e: any) => {
            onPassword && onPassword(e);
          }}
          onBlur={(e: any) => {
            onPassword && onPassword(e);
          }}
          onChange={handleChange('password')}
        />
      </FormItem>

      <Row style={{ marginBottom: 8 }}>
        <Col span={4} style={{ color: '#f04134', textAlign: 'right', paddingRight: 8 }}></Col>
        <Col className={styles.radioWrapper} span={20}>
          <RadioGroup onChange={handleServerTypeChange} value={serverType}>
            <Radio value="sid">sid</Radio>
            <Radio value="server">服务名</Radio>
          </RadioGroup>
        </Col>
      </Row>

      {serverType === 'sid' ? (
        <FormItem
          colon={false}
          label="sid"
          style={{ marginBottom: 8 }}
          // required={false}
          name="sid"
          rules={[{ required: true, message: '请输入sid', whitespace: true }]}>
          <Input placeholder="sid" onChange={handleChange('sid')} />
        </FormItem>
      ) : (
        <FormItem
          colon={false}
          label="服务名"
          style={{ marginBottom: 8 }}
          // required={false}
          name="serviceName"
          rules={[{ required: true, message: '请输入服务名', whitespace: true }]}>
          <Input placeholder="服务名" onChange={handleChange('serviceName')} />
        </FormItem>
      )}

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

export default connect()(OracelForm);
