'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var TextSkeleton_styles = require('./TextSkeleton.styles.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["lines", "width", "roundness", "customGradientColor", "lighter", "animationType", "customFadeInColor", "customFadeOutColor", "size", "view"];
var variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];

/**
 * Хок для создания компонента плейсхолдера нескольких строк текста.
 * Размеры компонента задаются с помощью констант и соответствуют размерам [типографических элементов](/?path=/docs/).
 */
var textSkeleton = function textSkeleton(Component) {
  return function (_ref) {
    var lines = _ref.lines,
      width = _ref.width,
      roundness = _ref.roundness,
      customGradientColor = _ref.customGradientColor,
      lighter = _ref.lighter,
      _ref$animationType = _ref.animationType,
      animationType = _ref$animationType === void 0 ? 'shimmer' : _ref$animationType,
      customFadeInColor = _ref.customFadeInColor,
      customFadeOutColor = _ref.customFadeOutColor,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'bodyM' : _ref$size,
      _ref$view = _ref.view,
      view = _ref$view === void 0 ? 'default' : _ref$view,
      props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var _useState = React.useState(null),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      fixedWidth = _useState2[0],
      setFixedWidth = _useState2[1];
    var _useState3 = React.useState([]),
      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
      linesWidth = _useState4[0],
      setLinesWidth = _useState4[1];
    React.useEffect(function () {
      if (!width) {
        setFixedWidth(null);
        var computedLengths = Array(lines).fill(0).reduce(function (acc, _, i) {
          var w;
          // Последняя строка
          if (i === lines - 1 && lines !== 1) {
            w = 45 - variousWidth[i % variousWidth.length];
          } else if (lines === 1 || lines === 2) {
            // Единственная или первая из двух
            w = 100;
          } else {
            w = 100 - variousWidth[i % variousWidth.length];
          }
          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, acc), {}, _rollupPluginBabelHelpers.defineProperty({}, i, w));
        }, {});
        setLinesWidth(Object.values(computedLengths));
        return;
      }
      if (!Number.isNaN(Number(width))) {
        setFixedWidth("".concat(width, "%"));
      } else {
        setFixedWidth(String(width));
      }
    }, [width, lines]);

    // TODO: Подумать как можно обойти явное приведение типов
    var ComponentSkeleton = Component;
    return /*#__PURE__*/React__default.default.createElement(TextSkeleton_styles.StyledTextSkeleton, props, Array.from(Array(lines), function (_, i) {
      return /*#__PURE__*/React__default.default.createElement(ComponentSkeleton, {
        key: "line:".concat(i),
        size: size,
        view: view,
        roundness: roundness,
        animationType: animationType,
        lighter: lighter,
        customGradientColor: customGradientColor,
        customFadeInColor: customFadeInColor,
        customFadeOutColor: customFadeOutColor,
        style: {
          width: fixedWidth || "".concat(linesWidth[i], "%")
        }
      });
    }));
  };
};

exports.textSkeleton = textSkeleton;
