import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import React, { useEffect, useMemo, Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import { HeaderButtons } from '@choerodon/master';
import EmptyPage from "../../../../../components/empty-page";
import { useClusterStore } from "../../../stores";
import CreateCluster from "../cluster-content/modals/create-cluster";
import CreateClusterByHost from "../cluster-content/modals/create-clusterByHost";
import { useClusterMainStore } from "../../stores";

var modalKey1 = _Modal.key();

var EmptyShown = observer(function () {
  var modalStyle = useMemo(function () {
    return {
      width: 380
    };
  }, []);

  var _useClusterStore = useClusterStore(),
      intlPrefix = _useClusterStore.intlPrefix,
      prefixCls = _useClusterStore.prefixCls,
      formatMessage = _useClusterStore.intl.formatMessage,
      projectId = _useClusterStore.AppState.currentMenuType.id,
      treeDs = _useClusterStore.treeDs,
      clusterStore = _useClusterStore.clusterStore,
      formDs = _useClusterStore.formDs,
      nodesTypeDs = _useClusterStore.nodesTypeDs,
      nodesDs = _useClusterStore.nodesDs,
      createHostClusterStore = _useClusterStore.createHostClusterStore,
      publicNodeDs = _useClusterStore.publicNodeDs;

  var _useClusterMainStore = useClusterMainStore(),
      mainStore = _useClusterMainStore.mainStore;

  function refreshTree() {
    treeDs.query();
  }

  useEffect(function () {
    clusterStore.setNoHeader(false);
  }, []);

  function openCreate() {
    _Modal.open({
      key: modalKey1,
      title: formatMessage({
        id: "".concat(intlPrefix, ".modal.create")
      }),
      children: /*#__PURE__*/React.createElement(CreateCluster, {
        afterOk: refreshTree,
        prefixCls: prefixCls,
        intlPrefix: intlPrefix,
        formatMessage: formatMessage,
        mainStore: mainStore,
        projectId: projectId
      }),
      drawer: true,
      style: modalStyle,
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function openCreateByHost() {
    _Modal.open({
      key: _Modal.key(),
      className: "".concat(prefixCls, "-createByHost-modal"),
      title: formatMessage({
        id: "".concat(intlPrefix, ".modal.createByHost")
      }),
      children: /*#__PURE__*/React.createElement(CreateClusterByHost, {
        formDs: formDs,
        afterOk: refreshTree,
        prefixCls: prefixCls,
        intlPrefix: intlPrefix,
        formatMessage: formatMessage,
        projectId: projectId,
        nodesTypeDs: nodesTypeDs,
        nodesDs: nodesDs,
        createHostClusterMainStore: createHostClusterStore,
        publicNodeDs: publicNodeDs
      }),
      drawer: true,
      style: {
        width: '740px'
      },
      destroyOnClose: true,
      okText: formatMessage({
        id: 'create'
      }),
      onCancel: function onCancel() {
        nodesDs.reset();
        formDs.reset();
      }
    });
  }

  function getButtons() {
    return [{
      name: formatMessage({
        id: "".concat(intlPrefix, ".modal.create")
      }),
      icon: 'playlist_add',
      handler: openCreate,
      display: true
    }, {
      name: formatMessage({
        id: "".concat(intlPrefix, ".modal.createByHost")
      }),
      permissions: ['choerodon.code.project.deploy.cluster.cluster-management.ps.createByHost'],
      icon: 'playlist_add',
      handler: openCreateByHost,
      display: true,
      disabledMessage: formatMessage({
        id: "".concat(intlPrefix, ".modal.create.disabled")
      })
    }];
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderButtons, {
    items: getButtons(),
    showClassName: true
  }), /*#__PURE__*/React.createElement(EmptyPage, {
    access: true,
    title: formatMessage({
      id: 'c7ncd.cluster.empty.title'
    }),
    describe: formatMessage({
      id: 'c7ncd.cluster.empty.describe'
    })
  }));
});
export default EmptyShown;