import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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 */
import React from 'react';
import { Component } from 'react';
import ArrowLeftCircleIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-circle';
import ArrowRightCircleIcon from '@atlaskit/icon/core/migration/chevron-right--chevron-right-circle';
import { hideControlsClassName } from '@atlaskit/media-ui';
import { Shortcut } from '@atlaskit/media-ui';
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styleWrappers';
import { getSelectedIndex } from './utils';
import { createNavigatedEvent } from './analytics/events/ui/navigated';
import { fireAnalytics } from './analytics';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Pressable, xcss } from '@atlaskit/primitives';
export var nextNavButtonId = 'media-viewer-navigation-next';
export var prevNavButtonId = 'media-viewer-navigation-prev';
var wrapperStyles = 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 = xcss({
  marginRight: 'space.100'
});
var iconLeftStyles = 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.createElement(Pressable, {
      xcss: [wrapperStyles, label === 'Next' ? iconRightStyles : iconLeftStyles],
      onClick: clickHandler('mouse'),
      testId: testId
    }, /*#__PURE__*/React.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(ArrowRightCircleIcon);
var PreviousIcon = withIconWrapper(ArrowLeftCircleIcon);
export var NavigationBase = /*#__PURE__*/function (_Component) {
  function NavigationBase() {
    _classCallCheck(this, NavigationBase);
    return _callSuper(this, NavigationBase, arguments);
  }
  _inherits(NavigationBase, _Component);
  return _createClass(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) {
          fireAnalytics(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 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.createElement(ArrowsWrapper, null, /*#__PURE__*/React.createElement(LeftWrapper, {
        isArchiveSideBarVisible: !!isArchiveSideBarVisible
      }, isLeftVisible ?
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      React.createElement(Arrow, {
        className: hideControlsClassName
      }, /*#__PURE__*/React.createElement(Shortcut, {
        code: 'ArrowLeft',
        handler: prev('keyboard'),
        eventType: 'keyup'
      }), /*#__PURE__*/React.createElement(PreviousIcon, {
        label: "Previous",
        clickHandler: prev,
        testId: prevNavButtonId
      })) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ?
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      React.createElement(Arrow, {
        className: hideControlsClassName
      }, /*#__PURE__*/React.createElement(Shortcut, {
        code: 'ArrowRight',
        handler: next('keyboard'),
        eventType: 'keyup'
      }), /*#__PURE__*/React.createElement(NextIcon, {
        label: "Next",
        clickHandler: next,
        testId: nextNavButtonId
      })) : null));
    }
  }]);
}(Component);
export var Navigation = withAnalyticsEvents({})(NavigationBase);