"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PanelsBase = exports.Panels = exports.default = void 0;

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

var _react = _interopRequireDefault(require("react"));

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

var _ViewManager = require("@enact/ui/ViewManager");

var _IdProvider = _interopRequireDefault(require("../internal/IdProvider"));

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

var _ApplicationCloseButton = _interopRequireDefault(require("./ApplicationCloseButton"));

var _CancelDecorator = _interopRequireDefault(require("./CancelDecorator"));

var _Viewport = _interopRequireDefault(require("./Viewport"));

var _Panels = _interopRequireDefault(require("./Panels.less"));

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

function _objectWithoutProperties(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]; } 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; }

/**
 * Basic Panels component without breadcrumbs or default [arranger]{@link ui/ViewManager.Arranger}
 *
 * @class Panels
 * @memberof moonstone/Panels
 * @ui
 * @public
 */
var PanelsBase = (0, _kind.default)({
  name: 'Panels',
  propTypes:
  /** @lends moonstone/Panels.Panels.prototype */
  {
    /**
     * Function that generates unique identifiers for Panel instances.
     *
     * @type {Function}
     * @required
     * @private
     */
    generateId: _propTypes.default.func.isRequired,

    /**
     * Set of functions that control how the panels are transitioned into and out of the
     * viewport.
     *
     * @see ui/ViewManager.SlideArranger
     * @type {Arranger}
     * @public
     */
    arranger: _ViewManager.shape,

    /**
     * An object containing properties to be passed to each child.
     *
     *`aria-owns` will be added or updated to this object to add the close button to the
     * accessibility tree of each panel.
     *
     * @type {Object}
     * @public
     */
    childProps: _propTypes.default.object,

    /**
     * [`Panels`]{@link moonstone/Panels.Panel} to be rendered
     *
     * @type {Panel}
     * @public
     */
    children: _propTypes.default.node,

    /**
     * Sets the hint string read when focusing the application close button.
     *
     * @type {String}
     * @default 'Exit app'
     * @public
     */
    closeButtonAriaLabel: _propTypes.default.string,

    /**
     * The background opacity of the application close button.
     *
     * * Values: `'translucent'`, `'lightTranslucent'`, `'transparent'`
     *
     * @type {String}
     * @default 'transparent'
     * @public
     */
    closeButtonBackgroundOpacity: _propTypes.default.oneOf(['translucent', 'lightTranslucent', 'transparent']),

    /**
     * Unique identifier for the Panels instance
     *
     * @type {String}
     * @public
     */
    id: _propTypes.default.string,

    /**
     * Index of the active panel
     *
     * @type {Number}
     * @default 0
     * @public
     */
    index: _propTypes.default.number,

    /**
     * Disables panel transitions.
     *
     * @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
  },
  defaultProps: {
    closeButtonBackgroundOpacity: 'transparent',
    index: 0,
    noAnimation: false,
    noCloseButton: false
  },
  styles: {
    css: _Panels.default,
    className: 'panels enact-fit'
  },
  computed: {
    className: function className(_ref) {
      var noCloseButton = _ref.noCloseButton,
          styler = _ref.styler;
      return styler.append({
        hasCloseButton: !noCloseButton
      });
    },
    applicationCloseButton: function applicationCloseButton(_ref2) {
      var closeButtonAriaLabel = _ref2.closeButtonAriaLabel,
          closeButtonBackgroundOpacity = _ref2.closeButtonBackgroundOpacity,
          id = _ref2.id,
          noCloseButton = _ref2.noCloseButton,
          onApplicationClose = _ref2.onApplicationClose;

      if (!noCloseButton) {
        var closeId = id ? "".concat(id, "_close") : null;
        return _react.default.createElement(_ApplicationCloseButton.default, {
          "aria-label": closeButtonAriaLabel,
          backgroundOpacity: closeButtonBackgroundOpacity,
          className: _Panels.default.close,
          id: closeId,
          onApplicationClose: onApplicationClose
        });
      }
    },
    childProps: function childProps(_ref3) {
      var _childProps = _ref3.childProps,
          id = _ref3.id,
          noCloseButton = _ref3.noCloseButton;

      if (noCloseButton || !id) {
        return _childProps;
      }

      var updatedChildProps = Object.assign({}, _childProps);
      var closeId = "".concat(id, "_close");
      var owns = updatedChildProps['aria-owns'];

      if (owns) {
        updatedChildProps['aria-owns'] = "".concat(owns, " ").concat(closeId);
      } else {
        updatedChildProps['aria-owns'] = closeId;
      }

      return updatedChildProps;
    }
  },
  render: function render(_ref4) {
    var noAnimation = _ref4.noAnimation,
        arranger = _ref4.arranger,
        childProps = _ref4.childProps,
        children = _ref4.children,
        generateId = _ref4.generateId,
        index = _ref4.index,
        applicationCloseButton = _ref4.applicationCloseButton,
        rest = _objectWithoutProperties(_ref4, ["noAnimation", "arranger", "childProps", "children", "generateId", "index", "applicationCloseButton"]);

    delete rest.closeButtonBackgroundOpacity;
    delete rest.closeButtonAriaLabel;
    delete rest.noCloseButton;
    delete rest.onApplicationClose;
    delete rest.onBack;
    return _react.default.createElement("div", rest, applicationCloseButton, _react.default.createElement(_Viewport.default, {
      arranger: arranger,
      childProps: childProps,
      generateId: generateId,
      index: index,
      noAnimation: noAnimation
    }, children));
  }
});
exports.PanelsBase = PanelsBase;
var Panels = (0, _CancelDecorator.default)({
  cancel: 'onBack'
}, (0, _IdProvider.default)((0, _Skinnable.default)(PanelsBase)));
exports.Panels = Panels;
var _default = Panels;
exports.default = _default;