"use strict";

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

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

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

var _react = require("react");

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

var _$L = _interopRequireDefault(require("../internal/$L"));

var _DateComponentPicker = require("../internal/DateComponentPicker");

var _DateTime = _interopRequireDefault(require("../internal/DateTime"));

var _TimePickerModule = _interopRequireDefault(require("./TimePicker.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; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

// values to use in hour picker for 24 and 12 hour locales
var hours24 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
var hours12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
/**
 * {@link agate/TimePicker/TimePickerBase.HourPicker} is a utility component to prevent the
 * animation of the picker when the display text doesn't change for 12-hour locales.
 *
 * @class HourPicker
 * @memberof agate/TimePicker/TimePickerBase
 * @ui
 * @private
 */

var HourPicker = /*#__PURE__*/function (_Component) {
  _inherits(HourPicker, _Component);

  var _super = _createSuper(HourPicker);

  function HourPicker(props) {
    var _this;

    _classCallCheck(this, HourPicker);

    _this = _super.call(this, props);
    _this.state = {
      noAnimation: false,
      prevValue: props.value
    };
    return _this;
  }

  _createClass(HourPicker, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          hasMeridiem = _this$props.hasMeridiem,
          rest = _objectWithoutProperties(_this$props, ["hasMeridiem"]);

      var hours = hasMeridiem ? hours12 : hours24;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentPicker, _objectSpread(_objectSpread({}, rest), {}, {
        noAnimation: this.state.noAnimation,
        children: hours
      }));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      if (state.prevValue !== props.value) {
        var hours = props.hasMeridiem ? hours12 : hours24;
        return {
          noAnimation: hours[state.prevValue] === hours[props.value],
          prevValue: props.value
        };
      }

      return null;
    }
  }]);

  return HourPicker;
}(_react.Component);
/**
 * {@link agate/TimePicker.TimePickerBase} is the stateless functional time picker
 * component. Should not be used directly but may be composed within another component as it is
 * within {@link agate/TimePicker.TimePicker}.
 *
 * @class TimePickerBase
 * @memberof agate/TimePicker
 * @ui
 * @public
 */


HourPicker.propTypes = {
  hasMeridiem: _propTypes["default"].bool,
  value: _propTypes["default"].number
};
var TimePickerBase = (0, _kind["default"])({
  name: 'TimePickerBase',
  propTypes:
  /** @lends agate/TimePicker.TimePickerBase.prototype */
  {
    /**
     * The `hour` component of the time.
     *
     * @type {Number}
     * @required
     * @public
     */
    hour: _propTypes["default"].number.isRequired,

    /**
     * The `meridiem` component of the time.
     *
     * @type {Number}
     * @required
     * @public
     */
    meridiem: _propTypes["default"].number.isRequired,

    /**
     * The `minute` component of the time.
     *
     * @type {Number}
     * @required
     * @public
     */
    minute: _propTypes["default"].number.isRequired,

    /**
     * The order in which the component pickers are displayed.
     *
     * Should be an array of 2 or 3 strings containing one of `'h'`, `'k'`, `'m'`, and `'a'`.
     *
     * @type {String[]}
     * @required
     * @public
     */
    order: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['h', 'k', 'm', 'a'])).isRequired,

    /**
     * Disables the `TimePicker`.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    disabled: _propTypes["default"].bool,

    /**
     * The "aria-label" for the hour picker
     *
     * If not specified, the "aria-label" for the hour picker will be
     * a combination of the current value and 'hour change a value with up down button'.
     *
     * @type {String}
     * @public
     */
    hourAriaLabel: _propTypes["default"].string,

    /**
     * The "aria-label" for the meridiem picker.
     *
     * If not specified, the "aria-label" for the meridiem picker will be
     * a combination of the current value and 'change a value with up down button'.
     *
     * @type {String}
     * @public
     */
    meridiemAriaLabel: _propTypes["default"].string,

    /**
     * Array of meridiem labels to display.
     *
     * @type {String[]}
     * @required
     * @public
     */
    meridiems: _propTypes["default"].arrayOf(_propTypes["default"].string),

    /**
     * The "aria-label" for the minute picker.
     *
     * If not specified, the "aria-label" for the minute picker will be
     * a combination of the current value and 'minute change a value with up down button'.
     *
     * @type {String}
     * @public
     */
    minuteAriaLabel: _propTypes["default"].string,

    /**
     * Called on changes in the `hour` component of the time.
     *
     * @type {Function}
     * @public
     */
    onHourChange: _propTypes["default"].func,

    /**
     * Called on changes in the `meridiem` component of the time.
     *
     * @type {Function}
     * @public
     */
    onMeridiemChange: _propTypes["default"].func,

    /**
     * Called on changes in the `minute` component of the time.
     *
     * @type {Function}
     * @public
     */
    onMinuteChange: _propTypes["default"].func,

    /**
     * Called when the component is removed while retaining focus.
     *
     * @type {Function}
     * @param {Object} event
     * @public
     */
    onSpotlightDisappear: _propTypes["default"].func,

    /**
     * Set content to RTL.
     *
     * @type {Boolean}
     * @private
     */
    rtl: _propTypes["default"].bool,

    /**
     * Disables 5-way spotlight from navigating into the component.
     *
     * @type {Boolean}
     * @public
     */
    spotlightDisabled: _propTypes["default"].bool
  },
  defaultProps: {
    disabled: false
  },
  styles: {
    css: _TimePickerModule["default"],
    className: 'timePicker',
    publicClassNames: true
  },
  computed: {
    hasMeridiem: function hasMeridiem(_ref) {
      var order = _ref.order;
      return order && order.indexOf('a') >= 0;
    },
    meridiemPickerWidth: function meridiemPickerWidth(_ref2) {
      var meridiem = _ref2.meridiem,
          meridiems = _ref2.meridiems;
      return meridiems && meridiems[meridiem].length * 1.5;
    }
  },
  render: function render(_ref3) {
    var disabled = _ref3.disabled,
        hasMeridiem = _ref3.hasMeridiem,
        hour = _ref3.hour,
        hourAriaLabel = _ref3.hourAriaLabel,
        meridiem = _ref3.meridiem,
        meridiemAriaLabel = _ref3.meridiemAriaLabel,
        meridiemPickerWidth = _ref3.meridiemPickerWidth,
        meridiems = _ref3.meridiems,
        minute = _ref3.minute,
        minuteAriaLabel = _ref3.minuteAriaLabel,
        onHourChange = _ref3.onHourChange,
        onMeridiemChange = _ref3.onMeridiemChange,
        onMinuteChange = _ref3.onMinuteChange,
        onSpotlightDisappear = _ref3.onSpotlightDisappear,
        order = _ref3.order,
        spotlightDisabled = _ref3.spotlightDisabled,
        rest = _objectWithoutProperties(_ref3, ["disabled", "hasMeridiem", "hour", "hourAriaLabel", "meridiem", "meridiemAriaLabel", "meridiemPickerWidth", "meridiems", "minute", "minuteAriaLabel", "onHourChange", "onMeridiemChange", "onMinuteChange", "onSpotlightDisappear", "order", "spotlightDisabled"]);

    var hourAccessibilityHint = (0, _$L["default"])('hour');
    var minuteAccessibilityHint = (0, _$L["default"])('minute');
    delete rest.rtl;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime["default"], _objectSpread(_objectSpread({}, rest), {}, {
      css: _TimePickerModule["default"],
      children: order && order.map(function (picker) {
        switch (picker) {
          case 'h':
          case 'k':
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HourPicker, {
                accessibilityHint: hourAccessibilityHint,
                "aria-label": hourAriaLabel,
                className: _TimePickerModule["default"].hourPicker,
                disabled: disabled,
                hasMeridiem: hasMeridiem,
                onChange: onHourChange,
                onSpotlightDisappear: onSpotlightDisappear,
                spotlightDisabled: spotlightDisabled,
                value: hour,
                width: 2,
                wrap: true
              })
            }, "hour-picker");

          case 'm':
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentRangePicker, {
              accessibilityHint: minuteAccessibilityHint,
              "aria-label": minuteAriaLabel,
              className: _TimePickerModule["default"].minutePicker,
              disabled: disabled,
              max: 59,
              min: 0,
              onChange: onMinuteChange,
              onSpotlightDisappear: onSpotlightDisappear,
              spotlightDisabled: spotlightDisabled,
              value: minute,
              width: 2,
              wrap: true
            }, "minute-picker");

          case 'a':
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentPicker, {
              "aria-label": meridiemAriaLabel,
              "aria-valuetext": meridiems ? meridiems[meridiem] : null,
              className: _TimePickerModule["default"].meridiemPicker,
              disabled: disabled,
              onChange: onMeridiemChange,
              onSpotlightDisappear: onSpotlightDisappear,
              spotlightDisabled: spotlightDisabled,
              value: meridiem,
              width: meridiemPickerWidth,
              reverseTransition: null,
              children: meridiems
            }, "meridiem-picker");
        }

        return null;
      })
    }));
  }
});
exports.TimePickerBase = TimePickerBase;
var _default = TimePickerBase;
exports["default"] = _default;