import React from 'react';
import {
  BrowserRouter as Router,
  Route, Switch
} from 'react-router-dom';
import loadable from "./util/loadable";

import { $hostParams, ContextPath, generateUUID } from './util';
import Signin from './view/Signin';
import Home from './view/Home';
import Manage from './view/Manage';
import Model from './view/Manage/Model';
import ModelConfig from './view/Manage/ModelConfig';
import AssetManage from './view/Manage/AssetManage';
import AssetBrowse from './view/Manage/AssetBrowse';
import DatasourceManage from './view/Manage/DatasourceManage';
import AssetDetailPage from './view/Manage/AssetManage/Component/AssetDetailPage';
import FlowAcceptDetail from './view/Manage/AssetManage/Component/FlowAcceptDetail';
import ImportAction from './view/Manage/Model/Component/ImportAction';
import EditModel from './view/Manage/Model/Component/EditModel';
import EditTemplate from './view/Manage/ModelConfig/Component/EditTemplate';
import AssetTree from './view/Manage/AssetManage/Component/AssetManageTree';
import DataService from './view/Manage/Pdata';
import DataServiceDetail from './view/Manage/Pdata/Component/ServiceDetail';
import GrantedDataServiceList from './view/Manage/Pdata/Component/GrantedList';
import AssetTask from './view/Manage/AssetTask';
import AssetEvaluate from './view/Manage/AssetEvaluate';
import VersionCompare from './view/Manage/AssetManage/Component/VersionCompare'
import { AssetBrowseReference, AssetDraftReference, AssetMountReference } from './util/constant';
import AssetColumnDetail from './view/Manage/AssetManage/Component/AssetColumnDetail';
import RelationContainer from './view/Manage/AssetBrowse/Component/RelationContainer';

const AssetDraft = loadable(()=> import('./view/Manage/AssetDraft'));
const AssetAction = loadable(()=> import('./view/Manage/AssetManage/Component/AssetAction'));
const SpreadjsView = loadable(()=> import('./view/Manage/AssetManage/Component/spreadjs-view'));
const AssetReviewDetail = loadable(()=> import('./view/Manage/AssetDraft/review'));
const DataMasterDefine = loadable(()=> import('./view/Manage/DataMaster/Define'));
const DataMasterManage = loadable(()=> import('./view/Manage/DataMaster/Manage'));


export const AppContext = React.createContext();
export const appId = generateUUID();

export class App extends React.Component {
  constructor() {
    super();

    this.state = {
      hostParams: null
    };
  }

  componentDidMount() {
    this.setState({ hostParams: this.props?.data });

    this.$$hostParams = $hostParams.subscribe({
      next: (v) => {
        if (v) {
          this.setState({ hostParams: v });
        }
      },
    });

  }

  componentWillUnmount() {
    this.$$hostParams?.unsubscribe();
  }

  render() {

    const { setGlobalState, onGlobalStateChange } = this.props;
    const { hostParams } = this.state;

    let message = '', id = '', terms = [],type = '';;
    if (hostParams) {
      message = hostParams.message||'';
      id = hostParams.id||'';
      type=hostParams.type||'';
      terms = hostParams.terms||[];
    }

    if (message === 'showDataModelDetail') {
      return (
        <AppContext.Provider value={{
          setGlobalState,
          onGlobalStateChange
        }}>
          <ImportAction
            modelerId={id} 
            action='detail'
            terms={terms}
          />
        </AppContext.Provider>
      );
    }
    
    if (message === 'showAssetDetail') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          setGlobalState,
          onGlobalStateChange
        }}>
          <AssetAction reference={AssetBrowseReference} id={id} permissionId={hostParams?.permissionId} action='detail' terms={terms} readonly={true} />
        </AppContext.Provider>
      );
    }

    if (message === 'showAssetTree') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          setGlobalState,
          onGlobalStateChange
        }}>
          <AssetTree 
            reference={AssetMountReference}
            checkable={true}
            metadataIds={hostParams.data}
            onCheck={(values) => { 
              hostParams.callback&&hostParams.callback(values); 
            }}
            {...this.props} 
          />
        </AppContext.Provider> 
      );
    }

    if (message === 'showDatasource') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          setGlobalState,
          onGlobalStateChange
        }}>
          <DatasourceManage />
        </AppContext.Provider>
      );
    }

    if (message === 'showDataService' || message === 'showDataServiceManage') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          openAdmit: hostParams?.openAdmit,
          openDetail: hostParams?.openDetail,
          editServer: hostParams?.editServer,
          applyServer: hostParams?.applyServer,
          setGlobalState,
          onGlobalStateChange
        }}>
          <DataService 
            isOnlyEnding={message==='showDataServiceManage'} 
            location={this.props.location}
          />
        </AppContext.Provider>
      );
    }

    if (message === 'showDataServiceDetail') {
      return (
        <AppContext.Provider value={{
          setGlobalState,
          onGlobalStateChange
        }}>
          <DataServiceDetail
            id={id} 
            terms={terms}
          />
        </AppContext.Provider>
      );
    }

    if(message==='showAssetColumnDetail'){
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          setGlobalState,
          onGlobalStateChange
        }}>
          <AssetColumnDetail id={id} type={type} />
        </AppContext.Provider>
      );
    }

    if (message === 'showGrantedDataService') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          openAdmit: hostParams?.openAdmit,
          openDetail: hostParams?.openDetail,
          editServer: hostParams?.editServer,
          applyServer: hostParams?.applyServer,
          setGlobalState,
          onGlobalStateChange
        }}>
          <GrantedDataServiceList/>
        </AppContext.Provider>
      );
    }

    if (message === 'showVersionCompare') {
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          openAdmit: hostParams?.openAdmit,
          openDetail: hostParams?.openDetail,
          editServer: hostParams?.editServer,
          applyServer: hostParams?.applyServer,
          setGlobalState,
          onGlobalStateChange
        }}>
          <VersionCompare id={id}/>
        </AppContext.Provider>
      );
    }

    if (message === 'showRelationContainer') {
      console.log('hostParams1',hostParams);
      return (
        <AppContext.Provider value={{
          env: hostParams?.env,
          user: hostParams?.user,
          setGlobalState,
          onGlobalStateChange
        }}>
          <RelationContainer nodeParams={hostParams?.nodeParams} onChange={hostParams?.changeNode} dirs={hostParams?.dirs} resize={false}/>
        </AppContext.Provider> 
      );
    }
    

    return (
      <AppContext.Provider value={{
        env: hostParams?.env,
        user: hostParams?.user,
        setGlobalState,
        onGlobalStateChange
      }}>
        <Router basename={window.__POWERED_BY_QIANKUN__ ? '/data-govern' : '/'}>
          <Switch>
            <Route path={`${ContextPath}/login`} component={Signin} exact />
            <Route path={`${ContextPath}/home`} component={Home} />
            <Route path={`${ContextPath}/manage`} component={Manage} />
            <Route path={`${ContextPath}/data-model-action`} component={EditModel} exact />   
            <Route path={`${ContextPath}/model-template-action`} component={EditTemplate} exact />    
            <Route path={`${ContextPath}/asset-detail`} component={AssetDetailPage} exact />   
            <Route path={`${ContextPath}/asset-review-detail`} component={AssetReviewDetail} />
            <Route path={`${ContextPath}/assetflowdetail`} component={FlowAcceptDetail} />

            <Route path={'/center-home/menu/datasource-manage'} component={DatasourceManage} exact />
            <Route path={'/center-home/menu/data-model'} component={Model} exact />
            <Route path={'/center-home/menu/model-config'} component={ModelConfig} exact />
            <Route path={'/center-home/menu/asset-draft'} component={AssetDraft} exact />
            <Route path={'/center-home/menu/asset-manage'} component={AssetManage} exact />
            <Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
            <Route path={'/center-home/menu/asset-task'} component={AssetTask} exact /> 
            <Route path={'/center-home/menu/asset-evaluate'} component={AssetEvaluate} exact />
            <Route path={'/center-home/menu/data-service'} component={DataService} exact />
            <Route path={'/center-home/data-model-action'} component={EditModel} exact />
            <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
            <Route path={'/center-home/session/asset-detail'} component={AssetDetailPage} exact />
            <Route path={'/center-home/assetflowdetail'} component={FlowAcceptDetail} exact />
            <Route path={'/center-home/menu/msd-define'} component={DataMasterDefine} exact /> 
            <Route path={'/center-home/menu/msd-manage'} component={DataMasterManage} exact /> 
            <Route path={'/data-govern/spreadjs-view'} component={SpreadjsView} exact />
          </Switch>
        </Router>
      </AppContext.Provider>
    );
  }
}