import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { HeaderButtons } from '@choerodon/boot';
import EnvDetail from "../../../../../../components/env-detail";
import HeaderAction from "../../../../../../components/header-action";
import Permission from "../../../../../resource/main-view/contents/environment/modals/permission";
import { useEnvironmentStore } from "../../../../stores";
import { useMainStore } from "../../../stores";
import { useDetailStore } from "../stores";
import useStore from "./useStore";
import EnvCreateForm from "../../../modals/env-create";
import GroupForm from "../../../modals/GroupForm";
import DeployConfigForm from "./deploy-config";
import { isNotRunning } from "../../../../util";
import Tips from "../../../../../../components/new-tips";
import "../../../../../../components/dynamic-select/style/index.less";

var detailKey = _Modal.key();

var envKey = _Modal.key();

var groupKey = _Modal.key();

var permissionKey = _Modal.key();

var resourceKey = _Modal.key();

var configKey = _Modal.key();

var ITEM_GROUP = 'group';
var ITEM_SAFETY = 'safety';
var EnvModals = observer(function () {
  var modalStore = useStore();
  var modalStyle = useMemo(function () {
    return {
      width: 380
    };
  }, []);
  var actionStyle = useMemo(function () {
    return {
      marginLeft: '.2rem'
    };
  }, []);
  var configModalStyle = useMemo(function () {
    return {
      width: 'calc(100vw - 3.52rem)',
      minWidth: '2rem'
    };
  }, []);

  var _useEnvironmentStore = useEnvironmentStore(),
      treeDs = _useEnvironmentStore.treeDs,
      currentIntlPrefix = _useEnvironmentStore.intlPrefix,
      currentPrefixCls = _useEnvironmentStore.prefixCls,
      getSelectedMenu = _useEnvironmentStore.envStore.getSelectedMenu,
      projectId = _useEnvironmentStore.AppState.currentMenuType.id;

  var _useMainStore = useMainStore(),
      groupFormDs = _useMainStore.groupFormDs;

  var _useDetailStore = useDetailStore(),
      formatMessage = _useDetailStore.formatMessage,
      intlPrefix = _useDetailStore.intlPrefix,
      prefixCls = _useDetailStore.prefixCls,
      detailStore = _useDetailStore.detailStore,
      _useDetailStore$tabs = _useDetailStore.tabs,
      SYNC_TAB = _useDetailStore$tabs.SYNC_TAB,
      CONFIG_TAB = _useDetailStore$tabs.CONFIG_TAB,
      ASSIGN_TAB = _useDetailStore$tabs.ASSIGN_TAB,
      permissionsDs = _useDetailStore.permissionsDs,
      gitopsLogDs = _useDetailStore.gitopsLogDs,
      gitopsSyncDs = _useDetailStore.gitopsSyncDs,
      configDs = _useDetailStore.configDs,
      configFormDs = _useDetailStore.configFormDs,
      checkEnvExist = _useDetailStore.checkEnvExist,
      baseDs = _useDetailStore.baseDs,
      nonePermissionDs = _useDetailStore.nonePermissionDs;

  function refresh() {
    checkEnvExist().then(function (query) {
      if (query) {
        var getTabKey = detailStore.getTabKey;

        switch (getTabKey) {
          case SYNC_TAB:
            {
              gitopsSyncDs.query();
              gitopsLogDs.query();
              break;
            }

          case CONFIG_TAB:
            configDs.query();
            break;

          case ASSIGN_TAB:
            permissionsDs.query();
            break;

          default:
        }

        treeDs.query();
        baseDs.query();
      }
    });
  }

  var disabled = isNotRunning(getSelectedMenu || {});

  function openEnvModal() {
    _Modal.open({
      key: envKey,
      title: formatMessage({
        id: "".concat(currentIntlPrefix, ".create")
      }),
      children: /*#__PURE__*/React.createElement(EnvCreateForm, {
        intlPrefix: currentIntlPrefix,
        refresh: refresh
      }),
      drawer: true,
      style: modalStyle,
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function openGroupModal() {
    _Modal.open({
      key: groupKey,
      title: formatMessage({
        id: "".concat(currentIntlPrefix, ".group.create")
      }),
      children: /*#__PURE__*/React.createElement(GroupForm, {
        dataSet: groupFormDs,
        treeDs: treeDs
      }),
      drawer: true,
      style: modalStyle,
      afterClose: function afterClose() {
        groupFormDs.current.reset();
      },
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function toPermissionTab() {
    var getTabKey = detailStore.getTabKey;
    detailStore.setTabKey(ASSIGN_TAB);
    treeDs.query();
    getTabKey === ASSIGN_TAB && permissionsDs.query();
  }

  function openEnvDetail() {
    _Modal.open({
      key: detailKey,
      title: formatMessage({
        id: "".concat(intlPrefix, ".modal.env-detail")
      }),
      children: /*#__PURE__*/React.createElement(EnvDetail, {
        record: getSelectedMenu,
        isRecord: false
      }),
      drawer: true,
      style: modalStyle,
      okCancel: false,
      okText: formatMessage({
        id: 'close'
      })
    });
  }

  function openPermission() {
    var modalPorps = {
      dataSet: permissionsDs,
      nonePermissionDs: nonePermissionDs,
      formatMessage: formatMessage,
      store: modalStore,
      baseDs: baseDs,
      intlPrefix: intlPrefix,
      prefixCls: prefixCls,
      refresh: refresh,
      projectId: projectId
    };

    _Modal.open({
      key: permissionKey,
      title: /*#__PURE__*/React.createElement(Tips, {
        helpText: formatMessage({
          id: "".concat(intlPrefix, ".permission.tips")
        }),
        title: formatMessage({
          id: "".concat(intlPrefix, ".modal.permission")
        })
      }),
      drawer: true,
      className: 'c7ncd-modal-wrapper',
      style: modalStyle,
      children: /*#__PURE__*/React.createElement(Permission, modalPorps)
    });
  }

  function openConfigModal() {
    var id = getSelectedMenu.id;
    configFormDs.create();

    _Modal.open({
      key: configKey,
      title: formatMessage({
        id: "".concat(currentIntlPrefix, ".create.config")
      }),
      children: /*#__PURE__*/React.createElement(DeployConfigForm, {
        store: detailStore,
        dataSet: configFormDs,
        refresh: refresh,
        envId: id,
        intlPrefix: currentIntlPrefix,
        prefixCls: currentPrefixCls
      }),
      drawer: true,
      style: configModalStyle,
      afterClose: function afterClose() {
        configFormDs.reset();
        detailStore.setValue('');
      },
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function getButtons() {
    return [{
      permissions: ['choerodon.code.project.deploy.environment.ps.detail-create-env'],
      name: formatMessage({
        id: "".concat(currentIntlPrefix, ".create")
      }),
      icon: 'playlist_add',
      handler: openEnvModal,
      display: true,
      group: 1
    }, {
      permissions: ['choerodon.code.project.deploy.environment.ps.detail-create-config'],
      disabled: disabled,
      name: formatMessage({
        id: "".concat(currentIntlPrefix, ".create.config")
      }),
      icon: 'playlist_add',
      handler: openConfigModal,
      display: true,
      group: 1
    }, {
      permissions: ['choerodon.code.project.deploy.environment.ps.permission'],
      disabled: disabled,
      name: formatMessage({
        id: "".concat(intlPrefix, ".modal.permission")
      }),
      icon: 'settings-o',
      handler: openPermission,
      display: true,
      group: 1
    }, {
      name: formatMessage({
        id: "".concat(intlPrefix, ".modal.env-detail")
      }),
      icon: 'find_in_page-o',
      handler: openEnvDetail,
      display: true,
      group: 2
    }, {
      name: '更多操作',
      groupBtnItems: [{
        name: formatMessage({
          id: "".concat(currentIntlPrefix, ".group.create")
        }),
        handler: openGroupModal
      }],
      group: 2
    }, {
      icon: 'refresh',
      handler: refresh,
      display: true,
      group: 2
    }];
  }

  return /*#__PURE__*/React.createElement(HeaderButtons, {
    items: getButtons(),
    showClassName: true
  });
});
export default EnvModals;