/* 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 const nextNavButtonId = 'media-viewer-navigation-next';
export const prevNavButtonId = 'media-viewer-navigation-prev';
const 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'
  }
});
const iconRightStyles = xcss({
  marginRight: 'space.100'
});
const iconLeftStyles = xcss({
  marginLeft: 'space.100'
});
const withIconWrapper = Component => {
  return ({
    label,
    clickHandler,
    testId
  }) => /*#__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"
  }));
};
const NextIcon = withIconWrapper(ArrowRightCircleIcon);
const PreviousIcon = withIconWrapper(ArrowLeftCircleIcon);
export class NavigationBase extends Component {
  navigate(direction, source) {
    return () => {
      const {
        onChange,
        items,
        createAnalyticsEvent
      } = this.props;
      const {
        selectedIndex
      } = this;
      const newItem = direction === 'next' ? items[selectedIndex + 1] : items[selectedIndex - 1];
      if (newItem) {
        fireAnalytics(createNavigatedEvent(direction, source, newItem), createAnalyticsEvent);
        onChange(newItem);
      }
    };
  }
  get selectedIndex() {
    const {
      items,
      selectedItem
    } = this.props;
    return getSelectedIndex(items, selectedItem);
  }
  render() {
    const {
      items,
      isArchiveSideBarVisible
    } = this.props;
    const {
      selectedIndex
    } = this;
    if (selectedIndex === -1) {
      return null;
    }
    const isLeftVisible = selectedIndex > 0;
    const isRightVisible = selectedIndex < items.length - 1;
    const prev = source => this.navigate('prev', source);
    const next = source => this.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));
  }
}
export const Navigation = withAnalyticsEvents({})(NavigationBase);