import { observer } from 'mobx-react';
import * as React from 'react';
import { Table, Button, Spin } from 'component/antd';
import { SearchAndFilterContainer } from 'container/search-filter';
import { IUploadFile } from 'types/base-type';
import { version } from 'store/version';
import { pagination } from 'constants/table';
import { getVersionColumns } from './config';
import { showUploadModal } from 'container/modal/admin';
import { tableFilter } from 'lib/utils';
import { admin } from 'store/admin';

@observer
export class VersionManagement extends SearchAndFilterContainer {
  public state = {
    searchKey: '',
    filterClusterNameVisible: false,
    filterConfigTypeVisible: false,
  };

  public async componentDidMount() {
    if (!version.fileTypeList.length) {
      await version.getFileTypeList();
    }

    if (!version.fileList.length) {
      version.getFileList();
    }

    if (!admin.metaList.length) {
      admin.getMetaData(false);
    }
  }
  public getColumns = () => {
    const columns = getVersionColumns();
    const clusterName = Object.assign({
      title: '集群名称',
      dataIndex: 'clusterName',
      key: 'clusterName',
      filters: tableFilter<any>(this.getData(version.fileList), 'clusterName'),
      onFilter: (value: string, record: IUploadFile) => record.clusterName === value,
    }, this.renderColumnsFilter('filterClusterNameVisible'));
    const configType = Object.assign({
      title: '配置类型',
      dataIndex: 'configType',
      key: 'configType',
      filters: tableFilter<any>(this.getData(version.fileList), 'configType'),
      onFilter: (value: string, record: IUploadFile) => record.configType === value,
    }, this.renderColumnsFilter('filterConfigTypeVisible'));
    const col = columns.splice(1, 0, clusterName, configType);
    return columns;
  }

  public getData<T extends IUploadFile>(origin: T[]) {
    let data: T[] = origin;
    let { searchKey } = this.state;
    searchKey = (searchKey + '').trim().toLowerCase();

    if (searchKey) {
      data = origin.filter((item: IUploadFile) => item.id + '' === searchKey
        || ((item.fileName !== undefined && item.fileName !== null) && item.fileName.toLowerCase().includes(searchKey as string)));
    }
    return data;
  }

  public renderTable() {
    return (
      <Spin spinning={version.loading}>
        <Table
          rowKey="key"
          columns={this.getColumns()}
          dataSource={this.getData(version.fileList)}
          pagination={pagination}
        />
      </Spin>

    );
  }

  public renderOperationPanel() {
    return (
      <ul>
        {this.renderSearch('', '请输入ID或文件名')}
        <li className="right-btn-1">
          <Button type="primary" onClick={() => showUploadModal()}>上传配置</Button>
        </li>
      </ul>
    );
  }

  public render() {
    const currentFileType = version.currentFileType;
    const acceptFileMap = version.acceptFileMap;
    return (
      <div className="container">
        <div className="table-operation-panel">
          {this.renderOperationPanel()}
        </div>
        <div className="table-wrapper">
          {this.renderTable()}
        </div>
      </div>
    );
  }
}