import "choerodon-ui/lib/button/style";
import _Button from "choerodon-ui/lib/button";
import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import "choerodon-ui/pro/lib/table/style";
import _Table from "@hzero-front-ui/c7n-ui/lib/TablePro";
import React, { useEffect } from 'react';
import { TabPage, Content, Permission, Breadcrumb, Action } from '@choerodon/boot';
import { withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import { useAppTopStore } from "../stores";
import { useServiceDetailStore } from "./stores";
import HeaderButtons from "./HeaderButtons";
import TimePopover from "../../../components/timePopover/TimePopover";
import ServicePermission from "./modals/permission";
import Tips from "../../../components/new-tips";
var Column = _Table.Column;

var modalKey1 = _Modal.key();

var modalStyle = {
  width: 380
};
var Allocation = withRouter(observer(function (props) {
  var _useAppTopStore = useAppTopStore(),
      intlPrefix = _useAppTopStore.intlPrefix,
      prefixCls = _useAppTopStore.prefixCls,
      appServiceStore = _useAppTopStore.appServiceStore;

  var _useServiceDetailStor = useServiceDetailStore(),
      formatMessage = _useServiceDetailStor.intl.formatMessage,
      permissionDs = _useServiceDetailStor.permissionDs,
      detailDs = _useServiceDetailStor.detailDs,
      nonePermissionDs = _useServiceDetailStor.nonePermissionDs,
      id = _useServiceDetailStor.AppState.currentMenuType.id;

  useEffect(function () {
    refresh();
  }, []);

  function refresh() {
    permissionDs.query();
    detailDs.query();
  }

  function renderTime(_ref) {
    var value = _ref.value;
    return /*#__PURE__*/React.createElement(TimePopover, {
      content: value
    });
  }

  function renderRole(_ref2) {
    var value = _ref2.value;
    var text = map(value || [], 'name');
    return text.join();
  }

  function renderAction(_ref3) {
    var record = _ref3.record;
    if (detailDs.current && detailDs.current.get('skipCheckPermission') || record.get('gitlabProjectOwner')) return;
    var actionData = [{
      service: ['choerodon.code.project.develop.app-service.ps.permission.delete'],
      text: formatMessage({
        id: 'delete'
      }),
      action: handleDelete
    }];
    return /*#__PURE__*/React.createElement(Action, {
      data: actionData
    });
  }

  function openDetail(appServiceIds) {
    var history = props.history,
        location = props.location;
    history.push("/rducm/code-lib-management/assign".concat(location.search, "&appServiceIds=").concat(appServiceIds)); // Modal.open({
    //   key: modalKey1,
    //   title: <Tips
    //     helpText={formatMessage({ id: `${intlPrefix}.detail.allocation.tips` })}
    //     title={formatMessage({ id: `${intlPrefix}.permission.manage` })}
    //   />,
    //   children: <ServicePermission
    //     dataSet={permissionDs}
    //     baseDs={detailDs}
    //     store={appServiceStore}
    //     nonePermissionDs={nonePermissionDs}
    //     intlPrefix="c7ncd.deployment"
    //     prefixCls={prefixCls}
    //     formatMessage={formatMessage}
    //     projectId={id}
    //     refresh={refresh}
    //   />,
    //   drawer: true,
    //   style: modalStyle,
    //   okText: formatMessage({ id: 'save' }),
    // });
  }

  function handleDelete() {
    var record = permissionDs.current;
    var modalProps = {
      title: formatMessage({
        id: "".concat(intlPrefix, ".permission.delete.title")
      }),
      children: formatMessage({
        id: "".concat(intlPrefix, ".permission.delete.des")
      }),
      okText: formatMessage({
        id: 'delete'
      }),
      okProps: {
        color: 'red'
      },
      cancelProps: {
        color: 'dark'
      }
    };
    permissionDs["delete"](record, modalProps);
  }

  function renderButtons() {
    // const isStop = detailDs.current && !detailDs.current.get('active');
    return (
      /*#__PURE__*/
      // <Permission
      //   service={['choerodon.code.project.develop.app-service.ps.permission.update']}
      // >
      //   <Tooltip
      //     title={isStop ? <FormattedMessage id={`${intlPrefix}.button.disabled`} /> : ''}
      //     placement="bottom"
      //   >
      React.createElement(Permission, {
        service: ['choerodon.code.project.develop.app-service.ps.permission.update']
      }, /*#__PURE__*/React.createElement(_Button, {
        icon: "authority",
        onClick: function onClick() {
          return openDetail(props.match.params.id);
        }
      }, /*#__PURE__*/React.createElement(FormattedMessage, {
        id: "".concat(intlPrefix, ".permission.manage")
      }))) //   </Tooltip>
      // </Permission>

    );
  }

  function handleTableFilter(record) {
    return record.status !== 'add';
  }

  function getTitle() {
    if (detailDs.current) {
      return detailDs.current.get('name');
    }
  }

  return /*#__PURE__*/React.createElement(TabPage, {
    service: ['choerodon.code.project.develop.app-service.ps.permission']
  }, /*#__PURE__*/React.createElement(HeaderButtons, null, renderButtons(), /*#__PURE__*/React.createElement(_Button, {
    icon: "refresh",
    onClick: refresh
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "refresh"
  }))), /*#__PURE__*/React.createElement(Breadcrumb, {
    title: getTitle()
  }), /*#__PURE__*/React.createElement(Content, {
    className: "".concat(prefixCls, "-detail-content")
  }, /*#__PURE__*/React.createElement(_Table, {
    dataSet: permissionDs,
    filter: handleTableFilter
  }, /*#__PURE__*/React.createElement(Column, {
    name: "realName",
    sortable: true
  }), /*#__PURE__*/React.createElement(Column, {
    renderer: renderAction,
    width: "0.7rem"
  }), /*#__PURE__*/React.createElement(Column, {
    name: "loginName",
    sortable: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "roles",
    renderer: renderRole
  }), /*#__PURE__*/React.createElement(Column, {
    name: "creationDate",
    renderer: renderTime,
    sortable: true
  }))));
}));
export default Allocation;