import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import React, { useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { withRouter } from 'react-router-dom';
import { HeaderButtons } from '@choerodon/boot';
import EnvCreateForm from "../../../modals/env-create";
import GroupForm from "../../../modals/GroupForm";
import { useEnvironmentStore } from "../../../../stores";
import { useMainStore } from "../../../stores";
import { useEnvGroupStore } from "../stores";

var groupKey = _Modal.key();

var envKey = _Modal.key();

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

  var _useEnvironmentStore = useEnvironmentStore(),
      intlPrefix = _useEnvironmentStore.intlPrefix,
      formatMessage = _useEnvironmentStore.intl.formatMessage,
      treeDs = _useEnvironmentStore.treeDs;

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

  var _useEnvGroupStore = useEnvGroupStore(),
      groupDs = _useEnvGroupStore.groupDs;

  useEffect(function () {
    var state = props.location.state;

    if (state && state.openCreate) {
      openEnvModal();
    }
  }, []);

  function refresh() {
    groupDs.query();
    treeDs.query();
  }

  function openGroupModal() {
    _Modal.open({
      key: groupKey,
      title: formatMessage({
        id: "".concat(intlPrefix, ".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 openEnvModal() {
    _Modal.open({
      key: envKey,
      title: formatMessage({
        id: "".concat(intlPrefix, ".create")
      }),
      children: /*#__PURE__*/React.createElement(EnvCreateForm, {
        intlPrefix: intlPrefix,
        refresh: refresh
      }),
      drawer: true,
      style: modalStyle,
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function getButtons() {
    return [{
      permissions: ['choerodon.code.project.deploy.environment.ps.group-add-env'],
      name: formatMessage({
        id: "".concat(intlPrefix, ".create")
      }),
      icon: 'playlist_add',
      handler: openEnvModal,
      display: true
    }, {
      permissions: ['choerodon.code.project.deploy.environment.ps.group-create'],
      name: formatMessage({
        id: "".concat(intlPrefix, ".group.create")
      }),
      icon: 'playlist_add',
      handler: openGroupModal,
      display: true
    }, {
      icon: 'refresh',
      handler: refresh,
      display: true
    }];
  }

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HeaderButtons, {
    items: getButtons(),
    showClassName: true
  }));
});
export default withRouter(GroupModal);