import React from 'react';
import { IconChevronRight, IconChevronLeft, IconZoomIn, IconZoomOut } from '@defencedigital/icon-library';
import { Button, BUTTON_VARIANT } from '../Button';
import { COMPONENT_SIZE } from '../Forms';
import { StyledToolbar } from './partials/StyledToolbar';
import { StyledToolbarButtons } from './partials/StyledToolbarButtons';
import { StyledToolbarSeparator } from './partials/StyledToolbarSeparator';
import { useTimelineFrame } from './hooks/useTimelineFrame';
import { useTimelineZoom } from './hooks/useTimelineZoom';
export var TimelineToolbar = function TimelineToolbar(_ref) {
  var hideScaling = _ref.hideScaling;
  var _useTimelineZoom = useTimelineZoom(),
    canZoomIn = _useTimelineZoom.canZoomIn,
    canZoomOut = _useTimelineZoom.canZoomOut,
    zoomIn = _useTimelineZoom.zoomIn,
    zoomOut = _useTimelineZoom.zoomOut;
  var _useTimelineFrame = useTimelineFrame(),
    moveNext = _useTimelineFrame.moveNext,
    movePrevious = _useTimelineFrame.movePrevious;
  return /*#__PURE__*/React.createElement(StyledToolbar, null, /*#__PURE__*/React.createElement(StyledToolbarButtons, null, /*#__PURE__*/React.createElement(Button, {
    "aria-label": "Navigate left",
    size: COMPONENT_SIZE.SMALL,
    variant: BUTTON_VARIANT.TERTIARY,
    icon: /*#__PURE__*/React.createElement(IconChevronLeft, null),
    onClick: movePrevious,
    title: "Navigate left"
  }), /*#__PURE__*/React.createElement(Button, {
    "aria-label": "Navigate right",
    size: COMPONENT_SIZE.SMALL,
    variant: BUTTON_VARIANT.TERTIARY,
    icon: /*#__PURE__*/React.createElement(IconChevronRight, null),
    onClick: moveNext,
    title: "Navigate right"
  })), !hideScaling && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledToolbarSeparator, null), /*#__PURE__*/React.createElement(StyledToolbarButtons, null, /*#__PURE__*/React.createElement(Button, {
    "aria-label": "Zoom out",
    isDisabled: !canZoomOut,
    size: COMPONENT_SIZE.SMALL,
    variant: BUTTON_VARIANT.TERTIARY,
    icon: /*#__PURE__*/React.createElement(IconZoomOut, null),
    onClick: zoomOut,
    title: "Zoom out"
  }), /*#__PURE__*/React.createElement(Button, {
    "aria-label": "Zoom in",
    isDisabled: !canZoomIn,
    size: COMPONENT_SIZE.SMALL,
    variant: BUTTON_VARIANT.TERTIARY,
    icon: /*#__PURE__*/React.createElement(IconZoomIn, null),
    onClick: zoomIn,
    title: "Zoom in"
  }))));
};
TimelineToolbar.displayName = 'TimelineToolbar';