"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabbedPanelsBase = exports.TabbedPanels = exports["default"] = void 0;

var _jsxRuntime = require("react/jsx-runtime");

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"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * 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 = (0, _kind["default"])({
  name: 'TabbedPanels',
  propTypes:
  /** @lends agate/Panels.TabbedPanels.prototype */
  {
    afterTabs: _propTypes["default"].node,
    arranger: _ViewManager.shape,
    beforeTabs: _propTypes["default"].node,
    closeButtonAriaLabel: _propTypes["default"].string,
    css: _propTypes["default"].object,
    duration: _propTypes["default"].number,
    index: _propTypes["default"].number,
    noAnimation: _propTypes["default"].bool,
    noCloseButton: _propTypes["default"].bool,
    onApplicationClose: _propTypes["default"].func,
    onBack: _propTypes["default"].func,
    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
    tabPosition: _propTypes["default"].string,
    tabs: _propTypes["default"].array
  },
  defaultProps: {
    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;
          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, ["afterTabs", "arranger", "beforeTabs", "children", "closeButtonAriaLabel", "css", "duration", "index", "noAnimation", "noCloseButton", "onApplicationClose", "onBack", "onSelect", "tabOrientation", "tabPosition", "tabs"]);

    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

exports.TabbedPanelsBase = TabbedPanelsBase;
var TabbedPanels = (0, _Slottable["default"])({
  slots: ['tabs', 'afterTabs', 'beforeTabs']
}, (0, _Changeable.Changeable)({
  prop: 'index',
  change: 'onSelect'
}, (0, _Skinnable["default"])(TabbedPanelsBase)));
exports.TabbedPanels = TabbedPanels;
var _default = TabbedPanels;
exports["default"] = _default;