"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.TabbedPanelsBase = exports.TabbedPanels = void 0;
var _handle = require("@enact/core/handle");
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _Changeable = require("@enact/ui/Changeable");
var _Layout = require("@enact/ui/Layout");
var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
var _ViewManager = require("@enact/ui/ViewManager");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _TabGroup = _interopRequireDefault(require("../TabGroup"));
var _Panels = _interopRequireDefault(require("./Panels"));
var _TabbedPanelsModule = _interopRequireDefault(require("./TabbedPanels.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["afterTabs", "arranger", "beforeTabs", "children", "closeButtonAriaLabel", "css", "duration", "index", "noAnimation", "noCloseButton", "onApplicationClose", "onBack", "onSelect", "tabOrientation", "tabPosition", "tabs"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
 * Tabbed Panels component.
 *
 * Usage:
 * ```
 * <TabbedPanels
 *   orientation={'vertical'}
 *   tabs={[
 *     {title: 'Panel1', icon: 'netbook'},
 *     {title: 'Panel2', icon: 'aircirculation'}
 *   ]}
 * >
 *   <Panel>Hello Panel 1</Panel>
 *   <Panel>Hello Panel 2</Panel>
 * </TabbedPanels>
 * ```
 *
 * @class TabbedPanels
 * @memberof agate/Panels
 * @ui
 * @public
 */
var TabbedPanelsBase = exports.TabbedPanelsBase = (0, _kind["default"])({
  name: 'TabbedPanels',
  propTypes: /** @lends agate/Panels.TabbedPanels.prototype */{
    /**
    * Nodes to be included after the tabs.
    *
    * @type {Node}
    * @public
    */
    afterTabs: _propTypes["default"].node,
    /**
     * Set of functions that control how the panels are transitioned into and out of the
     * viewport.
     *
     * @see {@link ui/ViewManager.SlideRightArranger}
     * @type {ui/ViewManager.Arranger}
     * @public
     */
    arranger: _ViewManager.shape,
    /**
    * Nodes to be included before the tabs.
    *
    * @type {Node}
    * @public
    */
    beforeTabs: _propTypes["default"].node,
    /**
     * Sets the hint string read when focusing the application close button.
     *
     * @type {String}
     * @default 'Exit app'
     * @public
     */
    closeButtonAriaLabel: _propTypes["default"].string,
    /**
     * Customizes the component by mapping the supplied collection of CSS class names to the
     * corresponding internal elements and states of this component.
     *
     * @type {Object}
     * @public
     */
    css: _propTypes["default"].object,
    /**
     * Duration of the animation (in ms) when transitioning between `Panel` components.
     *
     * @type {Number}
     * @public
     */
    duration: _propTypes["default"].number,
    /**
     * Index of the active panel
     *
     * @type {Number}
     * @default 0
     */
    index: _propTypes["default"].number,
    /**
     * Disables tabbed panels transition animations.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noAnimation: _propTypes["default"].bool,
    /**
     * Indicates the close button will not be rendered on the top right corner.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noCloseButton: _propTypes["default"].bool,
    /**
     * Called when the app close button is clicked.
     *
     * @type {Function}
     * @public
     */
    onApplicationClose: _propTypes["default"].func,
    /**
     * Called with cancel/back key events.
     *
     * @type {Function}
     * @public
     */
    onBack: _propTypes["default"].func,
    /**
     * The layout orientation of the component.
     *
     * @type {('horizontal'|'vertical')}
     * @public
     */
    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
    /**
     * The position of the tab.
     *
     * @type {String}
     * @default 'before'
     * @public
     */
    tabPosition: _propTypes["default"].string,
    /**
     * The tab array.
     *
     * @type {Array}
     * @public
     */
    tabs: _propTypes["default"].array
  },
  defaultProps: {
    closeButtonAriaLabel: 'Exit app',
    index: 0,
    noCloseButton: false,
    tabPosition: 'before'
  },
  styles: {
    css: _TabbedPanelsModule["default"],
    className: 'tabbedPanels enact-fit'
  },
  handlers: {
    onSelect: (0, _handle.handle)((0, _handle.adaptEvent)(function (_ref) {
      var selected = _ref.selected;
      return {
        index: selected
      };
    }, (0, _handle.forward)('onSelect')))
  },
  computed: {
    children: function children(_ref2) {
      var _children = _ref2.children,
        tabs = _ref2.tabs;
      // if there are children use them
      if (_children) {
        return _children;
      }
      // otherwise try to make children from the tabs' view and viewProps
      if (tabs) {
        return tabs.map(function (tab, index) {
          var View = tab.view,
            viewProps = tab.viewProps;
          delete tab.view;
          delete tab.viewProps;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(View, _objectSpread({}, viewProps), index);
        });
      }
    },
    className: function className(_ref3) {
      var css = _ref3.css,
        orientation = _ref3.orientation,
        styler = _ref3.styler,
        tabPosition = _ref3.tabPosition;
      return styler.append(tabPosition === 'after' ? css.reverse : '', orientation === 'vertical' ? css.column : '');
    },
    tabOrientation: function tabOrientation(_ref4) {
      var orientation = _ref4.orientation;
      return orientation === 'vertical' ? 'horizontal' : 'vertical';
    }
  },
  render: function render(_ref5) {
    var afterTabs = _ref5.afterTabs,
      arranger = _ref5.arranger,
      beforeTabs = _ref5.beforeTabs,
      children = _ref5.children,
      closeButtonAriaLabel = _ref5.closeButtonAriaLabel,
      css = _ref5.css,
      duration = _ref5.duration,
      index = _ref5.index,
      noAnimation = _ref5.noAnimation,
      noCloseButton = _ref5.noCloseButton,
      onApplicationClose = _ref5.onApplicationClose,
      onBack = _ref5.onBack,
      onSelect = _ref5.onSelect,
      tabOrientation = _ref5.tabOrientation,
      tabPosition = _ref5.tabPosition,
      tabs = _ref5.tabs,
      rest = _objectWithoutProperties(_ref5, _excluded);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Layout, _objectSpread(_objectSpread({}, rest), {}, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
        shrink: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
          afterTabs: afterTabs,
          beforeTabs: beforeTabs,
          className: css.tabs,
          onSelect: onSelect,
          orientation: tabOrientation,
          tabs: tabs,
          tabPosition: tabPosition,
          selectedIndex: index
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
        arranger: arranger,
        className: css.panels,
        closeButtonAriaLabel: closeButtonAriaLabel,
        component: _Panels["default"],
        duration: duration,
        noAnimation: noAnimation,
        noCloseButton: noCloseButton,
        onApplicationClose: onApplicationClose,
        onBack: onBack,
        orientation: tabOrientation,
        index: index,
        children: children
      })]
    }));
  }
});

// Currently not documenting the base output since it's not exported from index.js
var TabbedPanels = exports.TabbedPanels = (0, _Slottable["default"])({
  slots: ['tabs', 'afterTabs', 'beforeTabs']
}, (0, _Changeable.Changeable)({
  prop: 'index',
  change: 'onSelect'
}, (0, _Skinnable["default"])(TabbedPanelsBase)));
var _default = exports["default"] = TabbedPanels;