import React, { useEffect, useState } from 'react';
import { Modal, Typography, Button, Space, Tooltip, Spin } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard';

import { dispatch } from '../../../../model'; 
import { showMessage } from '../../../../util';

const FC = (props) => {
  const { visible, onCancel } = props;
  const [information, setInformation] = useState(undefined);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      getInformation();
    }
  }, [visible])

  const getInformation = () => {
    setLoading(true);
    dispatch({
      type: 'pds.getJdbcInformation',
      callback: data => {
        setLoading(false);
        setInformation(data);
      },
      error: () => {
        setLoading(false);
      }
    })
  }

  return (
    <Modal
      title='JDBC信息'
      width={540}
      visible={visible}
      onCancel={onCancel}
      footer={null}
    >
      <Spin spinning={loading}>
        <div className='flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ width: 400 }}>
            <Typography.Text>
            {`impala JDBC地址: ${information?.impala?.url}`}
            </Typography.Text>
          </div>
          <Space>
            <Tooltip title={information?.impala?.urlTip}>
              <Button type='link' icon={<CopyOutlined />} onClick={() => {
                if (information?.impala?.url) {
                  copy(information?.impala?.url);
                  showMessage('success', '复制成功');
                }
              }} />
            </Tooltip>
            <Tooltip title={information?.impala?.downloadTip}>
              <Button type='link' icon={<DownloadOutlined />} onClick={() => {
                if (information?.impala?.downloadUrl) {
                  copy(information?.impala?.downloadUrl);
                  showMessage('success', '复制成功');
                }
              }} />
            </Tooltip>
          </Space>
        </div>
        <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ width: 400 }}>
            <Typography.Text>
            {`Hana JDBC地址: ${information?.hana?.url}`}
            </Typography.Text>
          </div>
          <Space>
            <Tooltip title={information?.hana?.urlTip}>
              <Button type='link' icon={<CopyOutlined />} onClick={() => {
                if (information?.hana?.url) {
                  copy(information?.hana?.url);
                  showMessage('success', '复制成功');
                }          
              }} />
            </Tooltip>
            <Tooltip title={information?.hana?.downloadTip}>
              <Button type='link' icon={<DownloadOutlined />} onClick={() => {
                if (information?.hana?.downloadUrl) {
                  copy(information?.hana?.downloadUrl);
                  showMessage('success', '复制成功');
                }
              }} />
            </Tooltip>
          </Space>
        </div>
      </Spin>
    </Modal> 
  )   
}

export default FC;