import "choerodon-ui/lib/tooltip/style";
import _Tooltip from "choerodon-ui/lib/tooltip";
import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import "choerodon-ui/pro/lib/select/style";
import _Select from "choerodon-ui/pro/lib/select";
import "choerodon-ui/pro/lib/table/style";
import _Table from "@hzero-front-ui/c7n-ui/lib/TablePro";
import React, { Fragment, useCallback, useState, useEffect, useMemo } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react-lite';
import SourceTable from "./SourceTable";
import MarketSourceTable from "./components/market-table";
import Tips from "../../../../../components/new-tips";
import { useImportAppServiceStore } from "./stores";
var Column = _Table.Column;
var Option = _Select.Option;

var modalKey1 = _Modal.key();

var marketModalKey = _Modal.key();

var modalStyle1 = {
  width: 740
};
var Platform = injectIntl(observer(function (_ref) {
  var checkData = _ref.checkData;

  var _useImportAppServiceS = useImportAppServiceStore(),
      projectId = _useImportAppServiceS.AppState.currentMenuType.projectId,
      formatMessage = _useImportAppServiceS.intl.formatMessage,
      intlPrefix = _useImportAppServiceS.intlPrefix,
      prefixCls = _useImportAppServiceS.prefixCls,
      importDs = _useImportAppServiceS.importDs,
      importTableDs = _useImportAppServiceS.importTableDs,
      selectedDs = _useImportAppServiceS.selectedDs,
      importStore = _useImportAppServiceS.importStore,
      marketSelectedDs = _useImportAppServiceS.marketSelectedDs;

  var importRecord = useMemo(function () {
    return importDs.current || importDs.records[0];
  }, [importDs.current]);

  function openModal() {
    _Modal.open({
      key: modalKey1,
      drawer: true,
      title: /*#__PURE__*/React.createElement(Tips, {
        helpText: formatMessage({
          id: "".concat(intlPrefix, ".add.tips")
        }),
        title: formatMessage({
          id: "".concat(intlPrefix, ".add")
        })
      }),
      children: /*#__PURE__*/React.createElement(SourceTable, {
        tableDs: importTableDs,
        selectedDs: selectedDs,
        intlPrefix: intlPrefix,
        prefixCls: prefixCls,
        store: importStore,
        projectId: projectId,
        importRecord: importRecord
      }),
      style: modalStyle1,
      okText: formatMessage({
        id: 'add'
      }),
      afterClose: function afterClose() {
        importTableDs.removeAll();

        if (selectedDs.length) {
          checkData();
          selectedDs.forEach(function (record) {
            record.getField('versionId').fetchLookup();
          });
        }
      }
    });
  }

  function openMarketModal() {
    _Modal.open({
      key: marketModalKey,
      drawer: true,
      title: formatMessage({
        id: "".concat(intlPrefix, ".add")
      }),
      children: /*#__PURE__*/React.createElement(MarketSourceTable, {
        selectedDs: marketSelectedDs,
        checkData: checkData
      }),
      style: modalStyle1,
      okText: formatMessage({
        id: 'add'
      })
    });
  }

  function renderVersion(_ref2) {
    var record = _ref2.record;
    return /*#__PURE__*/React.createElement(_Select, {
      record: record,
      name: "versionId",
      searchable: true,
      searchMatcher: "version",
      clearButton: false,
      className: "".concat(prefixCls, "-import-platform-table-select")
    });
  }

  function renderAction() {
    return /*#__PURE__*/React.createElement(_Tooltip, {
      title: formatMessage({
        id: 'delete'
      })
    }, /*#__PURE__*/React.createElement(_Button, {
      shape: "circle",
      icon: "delete",
      funcType: "flat",
      onClick: handleDelete
    }));
  }

  function handleDelete() {
    var ds = (importRecord === null || importRecord === void 0 ? void 0 : importRecord.get('platformType')) === 'market' ? marketSelectedDs : selectedDs;
    ds.remove(ds.current, false);
    ds.length && checkData();
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-import-platform")
  }, /*#__PURE__*/React.createElement(_Button, {
    funcType: "raised",
    icon: "add",
    onClick: (importRecord === null || importRecord === void 0 ? void 0 : importRecord.get('platformType')) === 'share' ? openModal : openMarketModal,
    className: "platform-button"
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "".concat(intlPrefix, ".add")
  })), (importRecord === null || importRecord === void 0 ? void 0 : importRecord.get('platformType')) === 'share' ? /*#__PURE__*/React.createElement(_Table, {
    dataSet: selectedDs,
    queryBar: "none"
  }, /*#__PURE__*/React.createElement(Column, {
    name: "name",
    editor: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "code",
    editor: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "versionId",
    renderer: renderVersion,
    align: "left"
  }), /*#__PURE__*/React.createElement(Column, {
    name: "projectName",
    width: "1.5rem",
    header: formatMessage({
      id: "".concat(intlPrefix, ".belong.").concat(importRecord.get('platformType'))
    })
  }), /*#__PURE__*/React.createElement(Column, {
    renderer: renderAction,
    width: "0.7rem"
  })) : /*#__PURE__*/React.createElement(_Table, {
    dataSet: marketSelectedDs,
    queryBar: "none"
  }, /*#__PURE__*/React.createElement(Column, {
    name: "name",
    editor: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "code",
    editor: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "versionName",
    tooltip: "overflow"
  }), /*#__PURE__*/React.createElement(Column, {
    name: "sourceApp",
    tooltip: "overflow"
  }), /*#__PURE__*/React.createElement(Column, {
    name: "sourceProject",
    tooltip: "overflow"
  }), /*#__PURE__*/React.createElement(Column, {
    renderer: renderAction,
    width: "0.7rem"
  })));
}));
export default Platform;