"use strict";

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

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

var _kind = _interopRequireDefault(require("@enact/core/kind"));

var _util = require("@enact/core/util");

var _Group = _interopRequireDefault(require("@enact/ui/Group"));

var _Layout = require("@enact/ui/Layout");

var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));

var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _compose = _interopRequireDefault(require("ramda/src/compose"));

var _LabeledIcon = _interopRequireDefault(require("../LabeledIcon"));

var _Skinnable = _interopRequireDefault(require("../Skinnable"));

var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));

var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));

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

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; }

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; }

var TabBase = (0, _kind["default"])({
  name: 'Tab',
  propTypes: {
    css: _propTypes["default"].object,
    icon: _propTypes["default"].string,
    labelPosition: _propTypes["default"].string,
    onClick: _propTypes["default"].func,
    orientation: _propTypes["default"].string,
    selected: _propTypes["default"].bool
  },
  defaultProps: {
    icon: 'star'
  },
  styles: {
    css: _TabGroupModule["default"],
    className: 'tab'
  },
  computed: {
    className: function className(_ref) {
      var selected = _ref.selected,
          styler = _ref.styler;
      return styler.append({
        selected: selected
      });
    },
    tabLabel: function tabLabel(_ref2) {
      var children = _ref2.children,
          className = _ref2.className,
          css = _ref2.css,
          icon = _ref2.icon,
          labelPosition = _ref2.labelPosition,
          orientation = _ref2.orientation,
          selected = _ref2.selected;
      var inline;

      if (orientation === 'horizontal') {
        inline = true;
      }

      if (className.includes('copper') || className.includes('cobalt')) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          "aria-label": children,
          className: css.labeledIcon,
          role: "region",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButton["default"], {
            icon: icon,
            selected: selected
          }), children]
        });
      } else {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabeledIcon["default"], {
          className: css.labeledIcon,
          icon: icon,
          inline: inline,
          labelPosition: labelPosition,
          children: children
        });
      }
    }
  },
  render: function render(_ref3) {
    var onClick = _ref3.onClick,
        orientation = _ref3.orientation,
        _ref3$style = _ref3.style,
        style = _ref3$style === void 0 ? {} : _ref3$style,
        tabLabel = _ref3.tabLabel,
        rest = _objectWithoutProperties(_ref3, ["onClick", "orientation", "style", "tabLabel"]);

    delete rest.labelPosition;
    delete rest.selected;

    if (orientation === 'horizontal') {
      style.textAlign = 'center';
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, _objectSpread(_objectSpread({}, rest), {}, {
      style: style,
      onClick: onClick,
      children: tabLabel
    }));
  }
});
var Tab = (0, _Skinnable["default"])((0, _Spottable["default"])(TabBase));
/**
 * A Tab Group component.
 *
 * @class TabGroupBase
 * @memberof agate/TabGroup
 * @ui
 * @public
 */

var TabGroupBase = (0, _kind["default"])({
  name: 'TabGroup',
  propTypes:
  /** @lends agate/TabGroup.TabGroupBase.prototype */
  {
    tabPosition: _propTypes["default"].string.isRequired,
    tabs: _propTypes["default"].array.isRequired,
    afterTabs: _propTypes["default"].node,
    beforeTabs: _propTypes["default"].node,
    css: _propTypes["default"].object,
    orientation: _propTypes["default"].string,
    selectedIndex: _propTypes["default"].number
  },
  styles: {
    css: _TabGroupModule["default"],
    className: 'tabBar'
  },
  computed: {
    className: function className(_ref4) {
      var orientation = _ref4.orientation,
          tabPosition = _ref4.tabPosition,
          styler = _ref4.styler;
      return styler.append(orientation, ['position' + (0, _util.cap)(tabPosition)]);
    },
    labelPosition: function labelPosition(_ref5) {
      var orientation = _ref5.orientation,
          tabPosition = _ref5.tabPosition;

      // TODO: this keeps the label always between the icon and the panels, is it necessary?
      if (orientation === 'vertical') {
        if (tabPosition === 'before') {
          return 'after';
        } else {
          return 'before';
        }
      } else if (tabPosition === 'before') {
        return 'below';
      } else {
        return 'above';
      }
    },
    children: function children(_ref6) {
      var tabs = _ref6.tabs;
      return tabs.map(function (tab, i) {
        tab.key = 'tab' + i;
        tab.children = tab.title || tab.children;
        delete tab.title;
        return tab;
      });
    }
  },
  render: function render(_ref7) {
    var afterTabs = _ref7.afterTabs,
        beforeTabs = _ref7.beforeTabs,
        className = _ref7.className,
        css = _ref7.css,
        labelPosition = _ref7.labelPosition,
        orientation = _ref7.orientation,
        selectedIndex = _ref7.selectedIndex,
        style = _ref7.style,
        rest = _objectWithoutProperties(_ref7, ["afterTabs", "beforeTabs", "className", "css", "labelPosition", "orientation", "selectedIndex", "style"]);

    delete rest.tabPosition;
    delete rest.tabs;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Layout, {
      orientation: orientation,
      className: className,
      align: "stretch",
      style: style,
      children: [beforeTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
        className: css.tabEnds,
        shrink: true,
        children: beforeTabs
      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Layout, _objectSpread(_objectSpread({}, rest), {}, {
          className: css.tabGroup,
          align: "stretch center",
          childComponent: Tab,
          component: _Group["default"],
          itemProps: {
            labelPosition: labelPosition,
            orientation: orientation,
            shrink: orientation === 'vertical'
          },
          orientation: orientation,
          select: "radio",
          selected: selectedIndex,
          selectedProp: "selected"
        }))
      }), afterTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
        className: css.tabEnds,
        shrink: true,
        children: afterTabs
      }) : null]
    });
  }
});
exports.TabGroupBase = TabGroupBase;
TabGroupBase.defaultSlot = 'tabs';
/**
 * Applies Agate specific behaviors to [TabGroup]{@link agate/TabGroup.TabGroupBase} components.
 *
 * @hoc
 * @memberof agate/TabGroup
 * @mixes agate/Skinnable.Skinnable
 * @mixes ui/Slottable.Slottable
 * @public
 */

var TabGroupDecorator = (0, _compose["default"])(_Skinnable["default"], (0, _Slottable["default"])({
  slots: ['tabs', 'afterTabs', 'beforeTabs']
}));
/**
 * An Tab Group component, ready to use in Agate applications.
 *
 * Usage:
 * ```
 * <TabGroup
 *   tabPosition={'before'}
 *   tabs={[
 *     {title: 'Home', icon: 'home'},
 *     {title: 'Settings', icon: 'setting'},
 *     {title: 'Theme', icon: 'display'}
 *   ]}
 * />
 * ```
 *
 * @class TabGroup
 * @memberof agate/TabGroup
 * @extends agate/TabGroup.TabGroupBase
 * @mixes agate/TabGroup.TabGroupDecorator
 * @ui
 * @public
 */

exports.TabGroupDecorator = TabGroupDecorator;
var TabGroup = TabGroupDecorator(TabGroupBase);
exports.TabGroup = TabGroup;
var _default = TabGroup;
exports["default"] = _default;