"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.prevNavButtonId = exports.nextNavButtonId = exports.NavigationBase = exports.Navigation = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _chevronLeftChevronLeftCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-left--chevron-left-circle"));
var _chevronRightChevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-right--chevron-right-circle"));
var _mediaUi = require("@atlaskit/media-ui");
var _analyticsNext = require("@atlaskit/analytics-next");
var _styleWrappers = require("./styleWrappers");
var _utils = require("./utils");
var _navigated = require("./analytics/events/ui/navigated");
var _analytics = require("./analytics");
var _primitives = require("@atlaskit/primitives");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var nextNavButtonId = exports.nextNavButtonId = 'media-viewer-navigation-next';
var prevNavButtonId = exports.prevNavButtonId = 'media-viewer-navigation-prev';
var wrapperStyles = (0, _primitives.xcss)({
  width: '40px',
  height: '40px',
  borderRadius: 'radius.full',
  padding: 'space.0',
  // @ts-ignore
  backgroundColor: '#9FADBC',
  // @ts-ignore
  color: '#161A1D',
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  ':hover': {
    // @ts-ignore
    backgroundColor: '#B6C2CF'
  }
});
var iconRightStyles = (0, _primitives.xcss)({
  marginRight: 'space.100'
});
var iconLeftStyles = (0, _primitives.xcss)({
  marginLeft: 'space.100'
});
var withIconWrapper = function withIconWrapper(Component) {
  return function (_ref) {
    var label = _ref.label,
      clickHandler = _ref.clickHandler,
      testId = _ref.testId;
    return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
      xcss: [wrapperStyles, label === 'Next' ? iconRightStyles : iconLeftStyles],
      onClick: clickHandler('mouse'),
      testId: testId
    }, /*#__PURE__*/_react.default.createElement(Component, {
      label: label,
      LEGACY_size: "xlarge"
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
      ,
      LEGACY_primaryColor: "#9FADBC"
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
      ,
      LEGACY_secondaryColor: "#161A1D",
      color: "currentColor",
      size: "small"
    }));
  };
};
var NextIcon = withIconWrapper(_chevronRightChevronRightCircle.default);
var PreviousIcon = withIconWrapper(_chevronLeftChevronLeftCircle.default);
var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component) {
  function NavigationBase() {
    (0, _classCallCheck2.default)(this, NavigationBase);
    return _callSuper(this, NavigationBase, arguments);
  }
  (0, _inherits2.default)(NavigationBase, _Component);
  return (0, _createClass2.default)(NavigationBase, [{
    key: "navigate",
    value: function navigate(direction, source) {
      var _this = this;
      return function () {
        var _this$props = _this.props,
          onChange = _this$props.onChange,
          items = _this$props.items,
          createAnalyticsEvent = _this$props.createAnalyticsEvent;
        var selectedIndex = _this.selectedIndex;
        var newItem = direction === 'next' ? items[selectedIndex + 1] : items[selectedIndex - 1];
        if (newItem) {
          (0, _analytics.fireAnalytics)((0, _navigated.createNavigatedEvent)(direction, source, newItem), createAnalyticsEvent);
          onChange(newItem);
        }
      };
    }
  }, {
    key: "selectedIndex",
    get: function get() {
      var _this$props2 = this.props,
        items = _this$props2.items,
        selectedItem = _this$props2.selectedItem;
      return (0, _utils.getSelectedIndex)(items, selectedItem);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props3 = this.props,
        items = _this$props3.items,
        isArchiveSideBarVisible = _this$props3.isArchiveSideBarVisible;
      var selectedIndex = this.selectedIndex;
      if (selectedIndex === -1) {
        return null;
      }
      var isLeftVisible = selectedIndex > 0;
      var isRightVisible = selectedIndex < items.length - 1;
      var prev = function prev(source) {
        return _this2.navigate('prev', source);
      };
      var next = function next(source) {
        return _this2.navigate('next', source);
      };
      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArrowsWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftWrapper, {
        isArchiveSideBarVisible: !!isArchiveSideBarVisible
      }, isLeftVisible ?
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      _react.default.createElement(_styleWrappers.Arrow, {
        className: _mediaUi.hideControlsClassName
      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
        code: 'ArrowLeft',
        handler: prev('keyboard'),
        eventType: 'keyup'
      }), /*#__PURE__*/_react.default.createElement(PreviousIcon, {
        label: "Previous",
        clickHandler: prev,
        testId: prevNavButtonId
      })) : null), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightWrapper, null, isRightVisible ?
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      _react.default.createElement(_styleWrappers.Arrow, {
        className: _mediaUi.hideControlsClassName
      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
        code: 'ArrowRight',
        handler: next('keyboard'),
        eventType: 'keyup'
      }), /*#__PURE__*/_react.default.createElement(NextIcon, {
        label: "Next",
        clickHandler: next,
        testId: nextNavButtonId
      })) : null));
    }
  }]);
}(_react.Component);
var Navigation = exports.Navigation = (0, _analyticsNext.withAnalyticsEvents)({})(NavigationBase);