"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const Actions = ({
  onBlockPatternSelect
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
  className: "block-editor-block-pattern-setup__actions",
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button
  // TODO: Switch to `true` (40px size) if possible
  , {
    __next40pxDefaultSize: false,
    variant: "primary",
    onClick: onBlockPatternSelect,
    children: (0, _i18n.__)('Choose')
  })
});
const CarouselNavigation = ({
  handlePrevious,
  handleNext,
  activeSlide,
  totalSlides
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
  className: "block-editor-block-pattern-setup__navigation",
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button
  // TODO: Switch to `true` (40px size) if possible
  , {
    __next40pxDefaultSize: false,
    icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
    label: (0, _i18n.__)('Previous pattern'),
    onClick: handlePrevious,
    disabled: activeSlide === 0,
    accessibleWhenDisabled: true
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button
  // TODO: Switch to `true` (40px size) if possible
  , {
    __next40pxDefaultSize: false,
    icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight,
    label: (0, _i18n.__)('Next pattern'),
    onClick: handleNext,
    disabled: activeSlide === totalSlides - 1,
    accessibleWhenDisabled: true
  })]
});
const SetupToolbar = ({
  viewMode,
  setViewMode,
  handlePrevious,
  handleNext,
  activeSlide,
  totalSlides,
  onBlockPatternSelect
}) => {
  const isCarouselView = viewMode === _constants.VIEWMODES.carousel;
  const displayControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-editor-block-pattern-setup__display-controls",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button
    // TODO: Switch to `true` (40px size) if possible
    , {
      __next40pxDefaultSize: false,
      icon: _icons.stretchFullWidth,
      label: (0, _i18n.__)('Carousel view'),
      onClick: () => setViewMode(_constants.VIEWMODES.carousel),
      isPressed: isCarouselView
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button
    // TODO: Switch to `true` (40px size) if possible
    , {
      __next40pxDefaultSize: false,
      icon: _icons.grid,
      label: (0, _i18n.__)('Grid view'),
      onClick: () => setViewMode(_constants.VIEWMODES.grid),
      isPressed: viewMode === _constants.VIEWMODES.grid
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-editor-block-pattern-setup__toolbar",
    children: [isCarouselView && /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselNavigation, {
      handlePrevious: handlePrevious,
      handleNext: handleNext,
      activeSlide: activeSlide,
      totalSlides: totalSlides
    }), displayControls, isCarouselView && /*#__PURE__*/(0, _jsxRuntime.jsx)(Actions, {
      onBlockPatternSelect: onBlockPatternSelect
    })]
  });
};
var _default = exports.default = SetupToolbar;
//# sourceMappingURL=setup-toolbar.js.map