import * as React from 'react';
import { Table, Modal, Tooltip, Icon, message, notification } from 'component/antd';
import { app } from 'store/app';
import { observer } from 'mobx-react';
import { modal } from 'store/modal';
import { users } from 'store/users';
import { cellStyle } from 'constants/table';
import { cluster } from 'store/cluster';

@observer
export class OfflineClusterModal extends React.Component {

  public componentDidMount() {
    cluster.getClusterMetaTopics(modal.params);
  }

  public handleCancel = () => {
    modal.close();
    cluster.setClusterTopicsMeta([]);
  }

  public handleSubmit = () => {
    if (cluster.clusterMetaTopics.length) {
      return message.warning('存在Topic信息，无法申请下线！');
    }
    const offlineParams = {
      type: 14,
      applicant: users.currentUser.username,
      description: '',
      extensions: JSON.stringify({clusterId: modal.params}),
    };
    cluster.applyClusterOffline(offlineParams).then(data => {
      notification.success({ message: '申请下线成功' });
    });
    modal.close();
  }

  public getColumns = () => {
    const offlineColumns = [
      {
        title: 'Topic列表',
        dataIndex: 'topicName',
        key: 'topicName',
        onCell: () => ({
          style: {
            maxWidth: 250,
            ...cellStyle,
          },
        }),
        render: (t: string) => {
          return (
            <Tooltip placement="bottomLeft" title={t} >{t}</Tooltip>
          );
        },
      },
    ];
    return offlineColumns;
  }

  public render() {
    return (
      <>
        <Modal
          visible={true}
          className="stream-debug-modal"
          title={
            <span>
              申请下线
              <Tooltip placement="right" title={'如若有topic列表，则表示资源正处于使用中，禁止下线操作。如需下线，烦请下线topic列表所有topic。'} >
                <Icon className="question-icon" type="question-circle" />
              </Tooltip>
            </span>
          }
          maskClosable={false}
          onCancel={this.handleCancel}
          onOk={this.handleSubmit}
          okText="确认"
          cancelText="取消"
          okButtonProps={{ disabled: cluster.filterLoading || !!cluster.clusterMetaTopics.length }}
          width={700}
        >
          <Table
            rowKey="key"
            loading={cluster.filterLoading}
            dataSource={cluster.clusterMetaTopics}
            columns={this.getColumns()}
            scroll={{ x: 300, y: 320 }}
            pagination={false}
            bordered={true}
          />
        </Modal>
      </>
    );
  }
}