import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/form/style";
import _Form from "@hzero-front-ui/c7n-ui/lib/FormPro";
import "choerodon-ui/pro/lib/select/style";
import _Select from "choerodon-ui/pro/lib/select";
import "choerodon-ui/pro/lib/text-field/style";
import _TextField from "choerodon-ui/pro/lib/text-field";
import "choerodon-ui/pro/lib/icon/style";
import _Icon from "choerodon-ui/pro/lib/icon";
import React, { useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { CustomTabs } from '@choerodon/components';
import map from 'lodash/map';
import { useHostConfigStore } from "../../stores";
import "./index.less";
var ContentHeader = observer(function () {
  var _useHostConfigStore = useHostConfigStore(),
      prefixCls = _useHostConfigStore.prefixCls,
      formatMessage = _useHostConfigStore.formatMessage,
      searchDs = _useHostConfigStore.searchDs,
      hostTabKeys = _useHostConfigStore.hostTabKeys,
      listDs = _useHostConfigStore.listDs,
      mainStore = _useHostConfigStore.mainStore,
      showTestTab = _useHostConfigStore.showTestTab,
      statusDs = _useHostConfigStore.statusDs;

  var searchArr = useMemo(function () {
    return [{
      text: formatMessage({
        id: 'success'
      }),
      value: 'success'
    }, {
      text: formatMessage({
        id: 'failed'
      }),
      value: 'failed'
    }, {
      text: formatMessage({
        id: 'connecting'
      }),
      value: 'operating'
    }, {
      text: formatMessage({
        id: 'occupied'
      }),
      value: 'occupied'
    }];
  }, []);

  var getSearchArr = function getSearchArr() {
    var isTest = mainStore.getCurrentTabKey === 'distribute_test';
    return isTest ? searchArr : searchArr.slice(0, searchArr.length - 1);
  };

  useEffect(function () {
    statusDs && statusDs.loadData(getSearchArr());
  }, [mainStore.getCurrentTabKey]);

  var handleChange = function handleChange(key) {
    searchDs.reset();
    listDs.setQueryParameter('type', key);
    listDs.setQueryParameter('params', '');
    listDs.setQueryParameter('status', '');
    mainStore.setCurrentTabKey(key);
    listDs.query();
  };

  var handleSearch = function handleSearch() {
    var _searchDs$toData$ = searchDs.toData()[0],
        params = _searchDs$toData$.params,
        status = _searchDs$toData$.status;
    listDs.setQueryParameter('type', mainStore.getCurrentTabKey);
    listDs.setQueryParameter('params', params);
    listDs.setQueryParameter('status', status);
    listDs.query();
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-content-search")
  }, showTestTab && /*#__PURE__*/React.createElement(CustomTabs, {
    onChange: function onChange(e, tabName, tabKey) {
      return handleChange(tabKey);
    },
    data: map(hostTabKeys, function (item) {
      return {
        name: item === null || item === void 0 ? void 0 : item.text,
        value: item === null || item === void 0 ? void 0 : item.key
      };
    }),
    selectedTabValue: mainStore.getCurrentTabKey,
    className: "".concat(prefixCls, "-content-search-tab")
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(_Form, {
    dataSet: searchDs,
    columns: 7,
    className: "".concat(prefixCls, "-content-search-form"),
    labelLayout: 'horizontal',
    labelWidth: 1
  }, /*#__PURE__*/React.createElement(_TextField, {
    clearButton: true,
    name: "params",
    colSpan: 4,
    placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u6761\u4EF6",
    prefix: /*#__PURE__*/React.createElement(_Icon, {
      type: "search",
      style: {
        color: '#CACAE4',
        lineHeight: '22px'
      }
    }),
    onClear: handleSearch
  }), /*#__PURE__*/React.createElement(_Select, {
    label: "\u4E3B\u673A\u72B6\u6001:",
    name: "status",
    colSpan: 3,
    placeholder: "\u8BF7\u9009\u62E9",
    onClear: handleSearch,
    options: statusDs
  })), /*#__PURE__*/React.createElement(_Button, {
    onClick: handleSearch,
    className: "".concat(prefixCls, "-content-search-btn"),
    disabled: listDs.status === 'loading'
  }, formatMessage({
    id: 'search'
  }))));
});
export default ContentHeader;