import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import { IconClose } from '../../../_Icon/Icons/IconClose.js';
import cls from 'classnames';
import { base } from './variations/_view/base.js';
import { base as base$1 } from './variations/_size/base.js';
import { TourCard, CloseButton, Img, CardBody, CardText, Title, Description, Controls, DotsContainer, Dot, ActionButtonsContainer, SkipButtonContainer } from './Card.styles.js';
import { classes } from './Card.tokens.js';

var _IconClose;
var _excluded = ["view", "size", "image", "title", "description", "orientation", "showPagination", "stepCurrent", "stepLength", "actionButtons", "skipButton", "showClose", "goToStep", "onClose", "style", "className"];
var tourCardRoot = function tourCardRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
    var view = _ref.view,
      size = _ref.size,
      image = _ref.image,
      title = _ref.title,
      description = _ref.description,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
      _ref$showPagination = _ref.showPagination,
      showPagination = _ref$showPagination === void 0 ? true : _ref$showPagination,
      _ref$stepCurrent = _ref.stepCurrent,
      stepCurrent = _ref$stepCurrent === void 0 ? 0 : _ref$stepCurrent,
      _ref$stepLength = _ref.stepLength,
      stepLength = _ref$stepLength === void 0 ? 0 : _ref$stepLength,
      actionButtons = _ref.actionButtons,
      skipButton = _ref.skipButton,
      _ref$showClose = _ref.showClose,
      showClose = _ref$showClose === void 0 ? true : _ref$showClose,
      goToStep = _ref.goToStep,
      onClose = _ref.onClose,
      style = _ref.style,
      className = _ref.className,
      rest = _objectWithoutProperties(_ref, _excluded);
    // Если показан только текст, то к нему добавляется отступ снизу для компенсации.
    var onlyText = !showPagination && !actionButtons && !skipButton;
    var dotOnClick = function dotOnClick(index) {
      if (goToStep) {
        goToStep(index);
      }
    };
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      ref: outerRef,
      view: view,
      size: size
    }, rest), /*#__PURE__*/React__default.createElement(TourCard, {
      className: cls(className, classes.card),
      style: style,
      orientation: orientation
    }, showClose && /*#__PURE__*/React__default.createElement(CloseButton, {
      onClick: onClose
    }, _IconClose || (_IconClose = /*#__PURE__*/React__default.createElement(IconClose, {
      size: "xs",
      color: "inherit"
    }))), image && /*#__PURE__*/React__default.createElement(Img, _extends({}, image, {
      orientation: orientation
    })), /*#__PURE__*/React__default.createElement(CardBody, {
      orientation: orientation
    }, /*#__PURE__*/React__default.createElement(CardText, {
      onlyText: onlyText
    }, /*#__PURE__*/React__default.createElement(Title, {
      className: classes.title
    }, title), /*#__PURE__*/React__default.createElement(Description, {
      className: classes.description
    }, description)), /*#__PURE__*/React__default.createElement(Controls, {
      orientation: orientation
    }, showPagination && /*#__PURE__*/React__default.createElement(DotsContainer, {
      orientation: orientation,
      className: classes.pagination
    }, Array(stepLength).fill(null).map(function (_, index) {
      return /*#__PURE__*/React__default.createElement(Dot, {
        key: index,
        isActive: stepCurrent === index,
        onClick: function onClick() {
          return dotOnClick(index);
        }
      });
    })), actionButtons && /*#__PURE__*/React__default.createElement(ActionButtonsContainer, {
      orientation: orientation,
      className: classes.actionButtons
    }, actionButtons), skipButton && /*#__PURE__*/React__default.createElement(SkipButtonContainer, {
      orientation: orientation,
      className: classes.skipButton
    }, skipButton)))));
  });
};
var tourCardConfig = {
  name: 'Tour',
  tag: 'div',
  layout: tourCardRoot,
  base: '',
  variations: {
    view: {
      css: base
    },
    size: {
      css: base$1
    }
  },
  defaults: {
    view: 'default',
    size: 's'
  }
};

export { tourCardConfig, tourCardRoot };
