import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.map.js";
import './index.css';
import { MyFcrToolTip } from './view';
import { useMemo, useState } from 'react';
import clsx from 'clsx';
import listOnTopImg from './assets/fcr_listontop_big.svg';
import listGridImg from './assets/fcr_grid_big.svg';
import { useNamespace } from '../../utilities/use-namespace';
import { FcrIcon } from '../icon';
import { FcrIconType } from '../icon/type';
import { FcrPopover } from '../popover';
import { useI18n } from '../../i18n';
import { jsx as _jsx, jsxs as _jsxs } from "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 = useNamespace('layout-config-panel');
  var transI18n = useI18n();
  var options = useMemo(function () {
    return [{
      type: LayoutView.LIST_ON_TOP,
      img: listOnTopImg,
      text: transI18n('fmt_statusbar_opions_listontop')
    }, {
      type: LayoutView.GRID,
      img: listGridImg,
      text: transI18n('fmt_statusbar_label_grid').replace('reason1', "".concat(props.gridViews))
    }];
  }, [props.gridViews]);
  var t = useI18n();
  return /*#__PURE__*/_jsxs("div", {
    className: ns.b(),
    children: [options.map(function (item) {
      return /*#__PURE__*/_jsxs("div", {
        className: clsx(ns.e('option'), ns.is('active', props.layoutView === item.type)),
        onClick: function onClick() {
          return props.setLayoutView(item.type);
        },
        children: [/*#__PURE__*/_jsx("div", {
          className: ns.e('option-layout'),
          children: /*#__PURE__*/_jsx("div", {
            className: ns.e('option-layout-inner'),
            children: /*#__PURE__*/_jsx("div", {
              className: ns.e('option-layout-img-wrapper'),
              children: /*#__PURE__*/_jsx("img", {
                className: ns.e('option-layout-img'),
                src: item.img,
                referrerPolicy: "no-referrer"
              })
            })
          })
        }), /*#__PURE__*/_jsx("div", {
          className: ns.e('option-text'),
          children: item.text
        })]
      }, item.type);
    }), /*#__PURE__*/_jsx("div", {
      className: ns.e('divider')
    }), /*#__PURE__*/_jsx("div", {
      className: ns.e('setting'),
      children: t('fmt_statusbar_label_layoutsetting')
    })]
  });
};
export var LayoutConfig = function LayoutConfig(props) {
  var ns = useNamespace('layout-config');
  var t = useI18n();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var _useState3 = useState(LayoutView.LIST_ON_TOP),
    _useState4 = _slicedToArray(_useState3, 2),
    layoutView = _useState4[0],
    setLayoutView = _useState4[1];
  var gridViews = 16;
  var layoutIconType = useMemo(function () {
    switch (layoutView) {
      case LayoutView.LIST_ON_TOP:
        return FcrIconType.FCR_TOPWINDOWS;
      case LayoutView.GRID:
        return FcrIconType.FCR_FOURWINDOWS;
      default:
        return FcrIconType.FCR_TOPWINDOWS;
    }
  }, [layoutView]);
  return /*#__PURE__*/_jsx(MyFcrToolTip, {
    content: t('fmt_uimanager_labels_Switchview'),
    children: /*#__PURE__*/_jsx(FcrPopover, {
      trigger: "click",
      content: /*#__PURE__*/_jsx(LayoutPanel, {
        gridViews: gridViews,
        layoutView: layoutView,
        setLayoutView: setLayoutView
      }),
      placement: "bottom",
      overlayClassName: ns.e('popover'),
      afterVisibleChange: function afterVisibleChange(v) {
        return setIsOpen(v);
      },
      children: /*#__PURE__*/_jsxs("div", {
        className: ns.b(),
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: layoutIconType,
          className: ns.e('layout-icon'),
          size: 22
        }), /*#__PURE__*/_jsx("div", {
          children: t('fmt_statusbar_label_layout')
        }), /*#__PURE__*/_jsx(FcrIcon, {
          type: FcrIconType.FCR_DROPDOWN,
          className: clsx(ns.e('dropdown-icon'), ns.is('open', isOpen)),
          size: 18
        })]
      })
    })
  });
};