import React from 'react';
import { Button, Space, Spin, Input, Select, Tooltip, Dropdown, Menu, Modal } from 'antd';
import copy from "copy-to-clipboard";  
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import { ResizableBox } from 'react-resizable';
import classNames from 'classnames';

import ModelTree from './Component/ModelTree';
import ModelTable from './Component/ModelTable';
import ImportModal from './Component/ImportModal';
import ImportStockWordDrawer from './Component/ImportStockWordDrawer';
import ExportDDLModal from './Component/ExportDDLModal';
import ExportOtherModal from './Component/ExportOtherModal';
import RecatalogModal from './Component/RecatalogModal';
import HistoryAndVersionDrawer from './Component/HistoryAndVersionDrawer';
import StartFlowModal from './Component/StartFlowModal';
import JDBCInformation from './Component/JDBCInformation';
import { showMessage, showNotifaction, inputWidth, DeleteTipModal, getDataModelerRole } from '../../../util';
import { dispatch, dispatchLatestHomepage } from '../../../model'; 
import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, Holder, DDL, DataModelerRoleReader, ReadOnly } from '../../../util/constant';
import { AppContext } from '../../../App';
import DebounceInput from './Component/DebounceInput';
import ColSettingModal from './Component/ColSettingModal';
import StartAuthorize from './Component/StartAuthorize';
import StartRelease from './Component/StartRelease';
import Offline from './Component/Offline';

import './index.less';

const { Option } = Select;

const InputDebounce = DebounceInput(300)(Input);

class Model extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      importModalVisible: false,
      importStockWordDrawerVisible: false,
      exportDDLModalVisible: false,
      exportOtherModalVisible: false,
      recatalogModalVisible: false,
      historyAndVersionDrawerVisible: false,
      startFlowModalVisible: false,
      catalogId: '',
      importModalAction: '',
      tableData: [],
      filterTableData: [],
      loadingTableData: false, 
      selectModelerIds: [],
      selectModelerNames: [],
      keyword: '',
      hints: [],
      loadingStates: false,
      modelStates: [],
      currentModelState: props.isOnlyEnding?'4_0':'',
      currentODataState: '0',
      currentView: '',
      exportDDLModalReference: 'exportDDL',
      currentModel: {},
      offset: null,
      expandTree: true,
      showDeleteTip: false,
      colSettingModalVisible: false,
      visibleColNames: [],
      startAuthorizeParams: {
        visible: false,
        services: []
      },
      startReleaseVisible: false,
      offlineVisible: false,
      jdbcInformationVisible: false,
    }
  }
  
  componentDidMount() {
    this.getModelStates();
    this.getPreference();

    window?.addEventListener("storage", this.modelEventChange);
  }

  componentWillUnmount() {
    window?.removeEventListener("storage", this.modelEventChange);
  }

  modelEventChange = (e) => {
    if (e.key === 'modelChange') {
      this.onTableChange();
    }
  }

  getModelStates = () => {
    this.setState({ loadingStates: true }, () => {
      dispatch({
        type: 'pds.loadStateCatalog',
        payload: {
          isOnlyEnding: this.props.isOnlyEnding
        },
        callback: data => {
          this.setState({
            loadingStates: false,
            modelStates: this.props.isOnlyEnding ? data?.subCatalogs||[] : [{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]
          });
        },
        error: () => {
          this.setState({ loadingStates: false });
        }
      });
    })
  }

  getPreference = () => {
    dispatch({
      type: 'pds.getCols',
      payload: {
        modelName: 'DataService'
      },
      callback: data => {
        this.setState({visibleColNames: data?.map(item => item.titleCnName)});
      }
    })
  }

  onViewChange = (value) => {
    this.setState({ currentView: value });
  }

  onModelStateChange = (value) => {
    this.setState({ currentModelState: value, offset: null }, () => {
      this.onTableChange();
    })
  }

  onODataStateChange = (value) => {
    this.setState({ currentODataState: value, offset: null }, () => {
      this.onTableChange();
    })
  }

  onTreeSelect = (key, offset=null) => {

    this.setState({ catalogId: key, keyword: '', offset, currentModelState: this.state.currentModelState }, () => {
      if (!key || key==='') {
        this.setState({ tableData: [], filterTableData: [] });
      } else {
        this.onTableChange();
      }
    });
  }

  onTableChange = () => {
    const { currentView, catalogId, keyword, currentModelState, currentODataState } = this.state;

    this.setState({ loadingTableData: true }, () => {
      if (keyword === '') {
        if (currentView === 'dir') {

          const params = {
            pdsDataServiceCatalogId: catalogId,
            namespace: `${this.props.app?.env?.domainId}`,
            isExcludeOtherOwner: !this.props.isOnlyEnding
          };

          if (currentModelState !== '') {
            params.stateId = currentModelState;
          }

          dispatchLatestHomepage({
            type: 'pds.getServices',
            payload: params,
            callback: data => {

              const filterData = data.pdsdataServices?.filter(service => {
                if (currentODataState === '0') return true;
                if (currentODataState === '1') return service.supportODataDisable;
                if (currentODataState === '2') return !service.supportODataDisable;

                return false;
              })

              this.setState({ loadingTableData: false, tableData: data.pdsdataServices||[], filterTableData: filterData });
            },
            error: () => {
              this.setState({ loadingTableData: false });
            }
          })
        } else {
          dispatchLatestHomepage({
            type: 'pds.getStateServices',
            payload: {
              pdsDataServiceStateCatalogId: catalogId,
              namespace: `${this.props.app?.env?.domainId}`,
              isExcludeOtherOwner: !this.props.isOnlyEnding
            },
            callback: data => {
              const filterData = data.pdsdataServices?.filter(service => {
                if (currentODataState === '0') return true;
                if (currentODataState === '1') return service.supportODataDisable;
                if (currentODataState === '2') return !service.supportODataDisable;

                return false;
              })

              this.setState({ loadingTableData: false, tableData: data.pdsdataServices||[], filterTableData: filterData });
            },
            error: () => {
              this.setState({ loadingTableData: false });
            }
          })
        }
      } else {

        const params = {
          term: keyword,
          namespace: `${this.props.app?.env?.domainId}`,
          isExcludeOtherOwner: !this.props.isOnlyEnding
        };

        if (currentModelState !== '') {
          params.stateId = currentModelState;
        }

        dispatchLatestHomepage({
          type: 'pds.searchService',
          payload: params,
          callback: data => {
            const filterData = data?.filter(service => {
              if (currentODataState === '0') return true;
              if (currentODataState === '1') return service.supportODataDisable;
              if (currentODataState === '2') return !service.supportODataDisable;

              return false;
            })

            this.setState({ loadingTableData: false, tableData: data||[], filterTableData: filterData });
          },
          error: () => {
            this.setState({ loadingTableData: false });
          }
        })
      }
      
    })
  }

  onTableSelect = (ids) => {
    this.setState({ selectModelerIds: ids });
  }

  onTableItemAction = (record, action, readOnly=false) => {
    this.setState({ importModalAction: action, modelerId: record.id }, () => {
      const { catalogId, importModalAction, modelerId } = this.state;

      window.open(`/data-govern/data-model-action?${Action}=${importModalAction}&${CatalogId}=${catalogId}&${ModelerId}=${modelerId}&${PermitCheckOut}=${record.permitCheckOut||false}&${Editable}=${record.editable||false}&${StateId}=${record.state?.id||''}&${Holder}=${record.holder||''}&${ReadOnly}=${readOnly}`);
    });
  }

  onHistory = (id) => {
    this.setState({ historyAndVersionDrawerVisible: true, modelerId: id });
  }

  onSearchInputChange = (value) => {
    this.setState({ keyword: value||'', catalogId: '' }, () => {
      if (value !== '') {
        this.onTableChange();
      }
    });
  }

  onImportUnconditionBtnClick = () => {
    const { catalogId, currentView } = this.state;

    window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
  }

  onExportDDLBtnClick = () => {
    const { selectModelerIds, tableData } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    //服务名称在导出ddl的时候有使用
    const _selectModelerNames = [];

    (selectModelerIds||[]).forEach(id => {

      (tableData||[]).forEach(item => {
        if (item.id === id) {
          _selectModelerNames.push(item.name||'');
        }
      });

    });

    this.setState({ exportDDLModalVisible: true, selectModelerNames: _selectModelerNames, exportDDLModalReference: 'exportDDL' });
  }

  onExportOtherBtnClick = () => {
    this.setState({ exportOtherModalVisible: true });
  }

  startFlow = () => {
    const { selectModelerIds } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    this.setState({ startFlowModalVisible: true });
  }

  onRecatalogBtnClick = () => {
    const { selectModelerIds } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    this.setState({ recatalogModalVisible: true });
  }

  onAuthorizeBtnClick = () => {
    const { selectModelerIds, tableData } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    const services = (tableData||[]).filter(item => selectModelerIds.indexOf(item.id) !== -1);
    this.setState({ startAuthorizeParams: {
      visible: true,
      services
    }})
  }

  onReleaseBtnClick = () => {
    const { selectModelerIds } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    this.setState({ startReleaseVisible: true })
  }

  onSubscribeBtnClick = () => {
    const { selectModelerIds } = this.state;
    const { modal } = this.props;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    modal?.confirm({
      title: '提示',
      content: '是否确认订阅选中服务?',
      onOk: () => {
        dispatch({
          type: 'pds.subscribe',
          payload: {
            params: {
              ids: (selectModelerIds||[]).join(','),
            }
          },
          callback: () => {
            showMessage('success', '订阅成功');
            this.setState({ selectModelerIds: [] });
          }
        })
      },
    });
  }

  onOfflineBtnClick = () => {
    const { selectModelerIds } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    this.setState({ offlineVisible: true })
  }

  onBatchDeleteBtnClick = () => {

    const { selectModelerIds } = this.state;
    if ((selectModelerIds||[]).length === 0) {
      showMessage('info', '请先选择服务');
      return;
    }

    this.setState({ showDeleteTip: true });
  }

  onVisibleColSettingClick = () => {
    this.setState({colSettingModalVisible: true});
  }

  onAutoCreateTable = (item) => {

    this.setState({ exportDDLModalVisible: true, selectModelerNames: [item.name||''], exportDDLModalReference: 'createTable', currentModel: item });
  }

  onImportExcelVisibleChange = (visible = false, hint = null) => {
    this.setState({ importExcelVisible: visible });
  }

  onImportModalCancel = (refresh = false, confirm = false, hints = []) => {
    const { catalogId, currentView } = this.state;

    this.setState({ importModalVisible: false }, () => {
      refresh && this.onTableChange();

      if (confirm) {
        if ((hints||[]).length > 0) {
          setTimeout(() => {
            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}&${Hints}=${encodeURIComponent((hints||[]).join(','))}`);
          }, 1000);
        } else {
          setTimeout(() => {
            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
          }, 1000);
        }
      }
    });
  }

  onImportModalCancelByWord = (refresh = false, wordData = {}) => {
    const { catalogId } = this.state;

    this.setState({ importModalVisible: false }, () => {
      refresh && this.onTableChange();

      if (wordData && ((wordData.msg||'')!=='')) {
        showNotifaction('提示', wordData.msg);
      }
  
      if (wordData && (wordData.content||[]).length > 0) {
        if ((wordData.content||[]).length > 5) {
          showMessage('info', '最多只能同时编辑5条信息');
        }
  
        setTimeout(() => {
  
          wordData.content.slice(0, 5).forEach(data => {
            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${ModelerData}=${encodeURIComponent(JSON.stringify(data))}`, '_blank');
          })
  
        }, 2000);
  
      }
    });
  }

  onImportModalCancelByDDL = (confirm = false, ddl = '') => {
    const { catalogId } = this.state;

    this.setState({ importModalVisible: false }, () => {
  
      if (confirm && (ddl||'') !== '') {

        setTimeout(() => {
          window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${DDL}=${encodeURIComponent(ddl)}`, '_blank');
        }, 1000);
  
      }
    });
  }

  onImportStockWordDrawerCancel = () => {
    this.setState({ importStockWordDrawerVisible: false });
  }

  onImportStockWordSuccess = () => {
    this.onTableChange();
  }

  onExportDDLModalCancel = () => {
    this.setState({ exportDDLModalVisible: false });
  }

  onExportOtherModalCancel = (key='') => {
    const { selectModelerIds } = this.state;

    this.setState({ exportOtherModalVisible: false }, () => {
      if (key === 'ddl') {
        this.onExportDDLBtnClick();
      } else if (key === 'erwin') {
        dispatch({
          type: 'datamodel.exportERWinString',
          payload: {
            ids: selectModelerIds.join(','),
          },
          callback: data => {
            copy(JSON.stringify(data));
            showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 5);
          }
        });
      } else if (key === 'excel') {
        window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${selectModelerIds.join(',')}`);
      } else if (key === 'word') {
        window.open(`/api/datamodeler/easyDataModelerExport/word/template?ids=${selectModelerIds.join(',')}`);
      }
    });
  }

  onRecatalogModalCancel = (refresh = false) => {
    this.setState({ recatalogModalVisible: false });
    if (refresh) {
      this.setState({ selectModelerIds: [] }, () => {
        this.onTableChange();
      });
    }
  }

  onStartAuthorizeCancel = (refresh = false) => {
    this.setState({ startAuthorizeParams: {
      visible: false,
      services: []
    }});
    if (refresh) {
      this.setState({ selectModelerIds: [] }, () => {
        this.onTableChange();
      });
    }
  }

  onStartReleaseCancel = (refresh = false) => {
    this.setState({ startReleaseVisible: false });
    if (refresh) {
      this.setState({ selectModelerIds: [] }, () => {
        this.onTableChange();
      });
    }
  }

  onOfflineCancel = (refresh = false) => {
    this.setState({ offlineVisible: false });
    if (refresh) {
      this.setState({ selectModelerIds: [] }, () => {
        this.onTableChange();
      });
    }
  }

  onHistoryAndVersionDrawerCancel = () => {
    this.setState({ historyAndVersionDrawerVisible: false });
  }

  onStartFlowModalCancel = (refresh) => {
    this.setState({ startFlowModalVisible: false });

    if (refresh) {
      this.onTableChange();
      this.setState({ selectModelerIds: [] });
    }
  }

  importStockModel = () => {
    const { catalogId } = this.state;

    if ((catalogId||'') === '') {
      showMessage('info', '请先选择服务目录');
      return;
    }

    this.setState({ importStockWordDrawerVisible: true });
  }

  treeToggleClick = () => {
    this.setState({ expandTree: !this.state.expandTree });
  }

  onDeleteTipModalCancel = (refresh=false) => {
    const { selectModelerIds } = this.state;

    this.setState({ showDeleteTip: false });
    if (refresh) {
      dispatch({
        type: 'datamodel.deleteDataModels',
        payload: {
          params: {
            easyDataModelerDataModelIds: selectModelerIds.join(',')
          }
        },
        callback: (tip) => {
          this.onTableChange();
          this.setState({ selectModelerIds: [] });
          if ((tip||'')!=='') {
            showNotifaction('提示', tip, 5);
          }
        }
      })
    }
  }

  onColSettingModalCancel = (refresh = false) => {
    this.setState({ colSettingModalVisible: false }, () => {
      if (refresh) {
        this.getPreference();
      }
    });
  }

  render() {
    const { app, isOnlyEnding } = this.props;
    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip, colSettingModalVisible, visibleColNames, currentODataState } = this.state;

    const classes = classNames('data-model', {
      'data-model-collapse': !expandTree
    });  

    let disableStartFlow = false, startFlowTip = '';
    if ((currentView==='dir'&&currentModelState==='2')||(currentView!=='dir'&&catalogId==='2')) {
      disableStartFlow = true;
      startFlowTip = '只有草稿状态下的服务才能送审';
    } else if ((selectModelerIds||[]).length===0) {
      disableStartFlow = true;
      startFlowTip = '请先选择服务';
    }

    return (
      <div className={classes}>
        <ResizableBox 
          className='left' 
          width={230} 
          height={Infinity}
          axis='x'
          minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
        >
          <ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} importStockModel={this.importStockModel} keyword={keyword} {...this.props} />
        </ResizableBox>
        <div className='tree-toggle-wrap'>
          <div className='tree-toggle' onClick={this.treeToggleClick}>
          { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
          </div>
        </div>
        <div className='right'>
          <div
            className='d-flex p-3'
            style={{
              borderBottom: '1px solid #EFEFEF',
              justifyContent: 'space-between',
              alignItems: 'center'
            }}
          > 
            <Space>
            {
              currentView==='dir' && (getDataModelerRole(app?.user)!==DataModelerRoleReader) && !isOnlyEnding && <React.Fragment>
                <Space>
                  <Dropdown 
                    overlay={
                      <Menu>
                        <Menu.Item onClick={() => {
                          app?.editServer?.({ dirId: catalogId, type: 'register' }); 
                        }}>注册服务</Menu.Item>
                        <Menu.Item onClick={() => {
                          app?.editServer?.({ dirId: catalogId, type: 'drag' }); 
                        }}>拖拉创建服务</Menu.Item>
                        <Menu.Item onClick={() => { 
                          app?.editServer?.({ dirId: catalogId, type: 'sql' });
                        }}>自定义sql创建服务</Menu.Item>
                      </Menu>
                    } 
                    placement="bottomLeft"
                    trigger={['click']}
                  >
                    <Button>新建</Button>
                  </Dropdown>
                </Space>

                {/* <Space>
                <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onExportOtherBtnClick} disabled={(selectModelerIds||[]).length===0}>导出</Button>
                  </Tooltip>
                </Space> */}

                {/* <Space>
                  <Tooltip title={startFlowTip}>
                    <Button onClick={this.startFlow} disabled={disableStartFlow}>送审</Button>
                  </Tooltip>
                </Space> */}

                {/* <Space>
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onRecatalogBtnClick} disabled={(selectModelerIds||[]).length===0}>变更目录</Button>
                  </Tooltip>
                </Space> */}

                {/* <Space>
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onAuthorizeBtnClick} disabled={(selectModelerIds||[]).length===0}>授权</Button>
                  </Tooltip>
                </Space> */}

                {/* <Space>
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onReleaseBtnClick} disabled={(selectModelerIds||[]).length===0}>发布</Button>
                  </Tooltip>
                </Space> */}
              
                {/* <Space>
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onBatchDeleteBtnClick} disabled={(selectModelerIds||[]).length===0}>删除</Button>
                  </Tooltip>
                </Space> */}
                {/* <Space>
                  <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
                </Space> */}
                </React.Fragment>
            }
            <Space>
              <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
            </Space>
            <Space>
              <Button onClick={() => { this.setState({jdbcInformationVisible: true}); }}>JDBC信息</Button>
            </Space>
            {
              (getDataModelerRole(app?.user)!==DataModelerRoleReader) && isOnlyEnding && 
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onSubscribeBtnClick} disabled={(selectModelerIds||[]).length===0}>订阅</Button>
                  </Tooltip>
            }
            {
              (getDataModelerRole(app?.user)!==DataModelerRoleReader) && isOnlyEnding && 
                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
                    <Button onClick={this.onOfflineBtnClick} disabled={(selectModelerIds||[]).length===0}>下线</Button>
                  </Tooltip>
            }
            </Space>

            <Space> 
              {
                (currentView==='dir'||keyword!=='') && <Space>
                  <span>发布状态:</span>
                  <Select 
                    style={{ width: 120 }} 
                    onChange={(value) => {
                      this.onModelStateChange(value);
                    }}
                    loading={loadingStates}
                    value={loadingStates? '': currentModelState}
                  >
                  {
                    (modelStates||[]).map(item => {
                      return (
                        <Option key={item.id} value={item.id}>{item.cnName||''}</Option>
                      );
                    })
                  }
                  </Select>
                </Space>
              }     
              <Space>
                {/* <span>OData状态:</span>
                <Select 
                  style={{ width: 120 }} 
                  onChange={(value) => {
                    this.onODataStateChange(value);
                  }}
                  value={currentODataState}
                >
                  <Option value='0'>所有状态</Option>
                  <Option value='1'>已启动</Option>
                  <Option value='2'>未启动</Option>
                </Select> */}
              </Space>
              <Space>
                <InputDebounce 
                  placeholder="通过服务名称全文搜索" 
                  allowClear 
                  value={keyword}
                  onChange={(value) => { this.onSearchInputChange(value); }} 
                  style={{ width: inputWidth, marginLeft: 'auto' }}
                />
              </Space>

            </Space>

          </div>
          <div className='p-3'>
          <Spin spinning={loadingTableData}>
            <ModelTable 
              loading={loadingTableData}
              user={app?.user} 
              isOnlyEnding={isOnlyEnding}
              catalogId={catalogId} 
              view={currentView}
              data={filterTableData} 
              modelState={currentModelState}
              offset={offset}
              keyword={keyword}
              selectModelerIds={selectModelerIds}
              visibleColNames={visibleColNames}
              onChange={this.onTableChange} 
              onSelect={this.onTableSelect} 
              onItemAction={this.onTableItemAction} 
              onAutoCreateTable={this.onAutoCreateTable}
              onHistory={this.onHistory}
              {...this.props} />
          </Spin> 
          </div>
        </div>


        <RecatalogModal
          visible={recatalogModalVisible}
          ids={selectModelerIds}
          onCancel={this.onRecatalogModalCancel}
        />
        
        <HistoryAndVersionDrawer
          id={modelerId}
          visible={historyAndVersionDrawerVisible}
          onCancel={this.onHistoryAndVersionDrawerCancel}
        />

        <StartAuthorize 
          visible={this.state.startAuthorizeParams.visible}
          services={this.state.startAuthorizeParams.services}
          onCancel={this.onStartAuthorizeCancel}
        />

        <StartRelease
          visible={this.state.startReleaseVisible}
          ids={selectModelerIds}
          onCancel={this.onStartReleaseCancel}
        />

        <Offline
          visible={this.state.offlineVisible}
          ids={selectModelerIds}
          onCancel={this.onOfflineCancel}
        />

        <ColSettingModal
          visible={colSettingModalVisible}
          onCancel={this.onColSettingModalCancel}
        />

        <JDBCInformation
          visible={this.state.jdbcInformationVisible}
          onCancel={() => { this.setState({ jdbcInformationVisible: false }) }}
        />  
      </div>
    );
  }

}

const WrapModel = (props) => {
  const [modal, contextHolder] = Modal.useModal();

  return (
    <AppContext.Consumer>
    {
      value => <React.Fragment>
        <Model app={value} modal={modal} {...props} />
        {contextHolder}
      </React.Fragment>
    }  
    </AppContext.Consumer>
  )
}

export default WrapModel;
