import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
import { cx } from '../../utils/index.js';
import { Content, Score, Wrapper, StarsWrapper, HelperText, base } from './Rating.styles.js';
import { base as base$1 } from './variations/_view/base.js';
import { base as base$2 } from './variations/_size/base.js';
import { getInnerValue, getDisplayValue, getHelperTextPlacement, helperTextPlacements } from './utils/index.js';
import { classes } from './Rating.tokens.js';
import { getIcons } from './utils/getIcons.js';

var _excluded = ["value", "hasValue", "precision", "decimalSeparator", "valuePlacement", "iconSlot", "iconSlotOutline", "iconSlotHalf", "hasIcons", "iconQuantity", "helperText", "helperTextStretching", "size", "view"];
var ratingRoot = function ratingRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
    var value = _ref.value,
      _ref$hasValue = _ref.hasValue,
      hasValue = _ref$hasValue === void 0 ? true : _ref$hasValue,
      _ref$precision = _ref.precision,
      precision = _ref$precision === void 0 ? 1 : _ref$precision,
      _ref$decimalSeparator = _ref.decimalSeparator,
      decimalSeparator = _ref$decimalSeparator === void 0 ? '.' : _ref$decimalSeparator,
      valuePlacement = _ref.valuePlacement,
      iconSlot = _ref.iconSlot,
      iconSlotOutline = _ref.iconSlotOutline,
      iconSlotHalf = _ref.iconSlotHalf,
      _ref$hasIcons = _ref.hasIcons,
      hasIcons = _ref$hasIcons === void 0 ? true : _ref$hasIcons,
      _ref$iconQuantity = _ref.iconQuantity,
      iconQuantity = _ref$iconQuantity === void 0 ? 5 : _ref$iconQuantity,
      helperText = _ref.helperText,
      _ref$helperTextStretc = _ref.helperTextStretching,
      helperTextStretching = _ref$helperTextStretc === void 0 ? 'filled' : _ref$helperTextStretc,
      size = _ref.size,
      view = _ref.view,
      rest = _objectWithoutProperties(_ref, _excluded);
    var innerValue = getInnerValue(value, precision, iconQuantity);
    var displayValue = getDisplayValue(innerValue, decimalSeparator);
    var contentRef = useRef(null);
    var starsWrapperRef = useRef(null);
    var _useState = useState('unset'),
      _useState2 = _slicedToArray(_useState, 2),
      helperTextMaxWidth = _useState2[0],
      setHelperTextMaxWidth = _useState2[1];
    useEffect(function () {
      if (!hasValue && !hasIcons) {
        // eslint-disable-next-line no-console
        console.error("Rating should have at least one of 'hasValue' or 'hasIcons' props");
      }
    }, [hasValue, hasIcons]);
    useEffect(function () {
      if (helperTextStretching === 'filled') {
        setHelperTextMaxWidth('unset');
        return;
      }
      var helpertextPlacement = getHelperTextPlacement(value, size, hasIcons, iconQuantity);
      if (helpertextPlacement === helperTextPlacements.inner) {
        if (!(starsWrapperRef !== null && starsWrapperRef !== void 0 && starsWrapperRef.current)) {
          setHelperTextMaxWidth('unset');
          return;
        }
        var starsWrapperWidth = starsWrapperRef.current.offsetWidth;
        setHelperTextMaxWidth("".concat(starsWrapperWidth, "px"));
      } else if (helpertextPlacement === helperTextPlacements.outer) {
        if (!(contentRef !== null && contentRef !== void 0 && contentRef.current)) {
          setHelperTextMaxWidth('unset');
          return;
        }
        var _starsWrapperWidth = contentRef.current.offsetWidth;
        setHelperTextMaxWidth("".concat(_starsWrapperWidth, "px"));
      }
    }, [helperTextStretching, helperText, hasValue, hasIcons, precision, value, iconQuantity]);

    // INFO: Если выключено отображение иконок и значения, нет смысла показывать только helperText
    if (!hasValue && !hasIcons) {
      return null;
    }
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      ref: ref,
      view: view,
      size: size
    }, rest), /*#__PURE__*/React__default.createElement(Content, {
      ref: contentRef,
      className: cx(valuePlacement === 'after' && classes.valueAfter, iconQuantity === 1 && classes.singleIconContent)
    }, hasValue && innerValue && /*#__PURE__*/React__default.createElement(Score, null, displayValue), hasIcons && /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(StarsWrapper, {
      ref: starsWrapperRef
    }, getIcons({
      innerValue: innerValue,
      size: size,
      iconQuantity: iconQuantity,
      iconSlot: iconSlot,
      iconSlotOutline: iconSlotOutline,
      iconSlotHalf: iconSlotHalf
    })), helperText && getHelperTextPlacement(value, size, hasIcons, iconQuantity) === helperTextPlacements.inner && /*#__PURE__*/React__default.createElement(HelperText, {
      style: {
        maxWidth: helperTextMaxWidth
      }
    }, helperText))), helperText && getHelperTextPlacement(value, size, hasIcons, iconQuantity) === helperTextPlacements.outer && /*#__PURE__*/React__default.createElement(HelperText, {
      className: classes.helperTextOuter,
      style: {
        maxWidth: helperTextMaxWidth
      }
    }, helperText));
  });
};
var ratingConfig = {
  name: 'Rating',
  tag: 'div',
  layout: ratingRoot,
  base: base,
  variations: {
    view: {
      css: base$1
    },
    size: {
      css: base$2
    }
  },
  defaults: {
    view: 'default',
    size: 'l'
  }
};

export { ratingConfig, ratingRoot };
