"use strict";

require("core-js/modules/es.object.define-property.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LayoutConfig = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.map.js");
require("./index.css");
var _view = require("./view");
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _fcr_listontop_big = _interopRequireDefault(require("./assets/fcr_listontop_big.svg"));
var _fcr_grid_big = _interopRequireDefault(require("./assets/fcr_grid_big.svg"));
var _useNamespace = require("../../utilities/use-namespace");
var _icon = require("../icon");
var _type = require("../icon/type");
var _popover = require("../popover");
var _i18n = require("../../i18n");
var _jsxRuntime = require("react/jsx-runtime");
var LayoutView = /*#__PURE__*/function (LayoutView) {
  LayoutView["LIST_ON_TOP"] = "LIST_ON_TOP";
  LayoutView["GRID"] = "GRID";
  return LayoutView;
}(LayoutView || {});
var LayoutPanel = function LayoutPanel(props) {
  var ns = (0, _useNamespace.useNamespace)('layout-config-panel');
  var transI18n = (0, _i18n.useI18n)();
  var options = (0, _react.useMemo)(function () {
    return [{
      type: LayoutView.LIST_ON_TOP,
      img: _fcr_listontop_big["default"],
      text: transI18n('fmt_statusbar_opions_listontop')
    }, {
      type: LayoutView.GRID,
      img: _fcr_grid_big["default"],
      text: transI18n('fmt_statusbar_label_grid').replace('reason1', "".concat(props.gridViews))
    }];
  }, [props.gridViews]);
  var t = (0, _i18n.useI18n)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: ns.b(),
    children: [options.map(function (item) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: (0, _clsx["default"])(ns.e('option'), ns.is('active', props.layoutView === item.type)),
        onClick: function onClick() {
          return props.setLayoutView(item.type);
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('option-layout'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: ns.e('option-layout-inner'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: ns.e('option-layout-img-wrapper'),
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                className: ns.e('option-layout-img'),
                src: item.img,
                referrerPolicy: "no-referrer"
              })
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('option-text'),
          children: item.text
        })]
      }, item.type);
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: ns.e('divider')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: ns.e('setting'),
      children: t('fmt_statusbar_label_layoutsetting')
    })]
  });
};
var LayoutConfig = exports.LayoutConfig = function LayoutConfig(props) {
  var ns = (0, _useNamespace.useNamespace)('layout-config');
  var t = (0, _i18n.useI18n)();
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var _useState3 = (0, _react.useState)(LayoutView.LIST_ON_TOP),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    layoutView = _useState4[0],
    setLayoutView = _useState4[1];
  var gridViews = 16;
  var layoutIconType = (0, _react.useMemo)(function () {
    switch (layoutView) {
      case LayoutView.LIST_ON_TOP:
        return _type.FcrIconType.FCR_TOPWINDOWS;
      case LayoutView.GRID:
        return _type.FcrIconType.FCR_FOURWINDOWS;
      default:
        return _type.FcrIconType.FCR_TOPWINDOWS;
    }
  }, [layoutView]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
    content: t('fmt_uimanager_labels_Switchview'),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
      trigger: "click",
      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutPanel, {
        gridViews: gridViews,
        layoutView: layoutView,
        setLayoutView: setLayoutView
      }),
      placement: "bottom",
      overlayClassName: ns.e('popover'),
      afterVisibleChange: function afterVisibleChange(v) {
        return setIsOpen(v);
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: ns.b(),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
          type: layoutIconType,
          className: ns.e('layout-icon'),
          size: 22
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: t('fmt_statusbar_label_layout')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
          type: _type.FcrIconType.FCR_DROPDOWN,
          className: (0, _clsx["default"])(ns.e('dropdown-icon'), ns.is('open', isOpen)),
          size: 18
        })]
      })
    })
  });
};