"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _constants = require("../../constants");
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const DEFAULT_ICONS = ['clock', 'emoticon-smile', 'rocket', 'sand-clock', 'sleep', 'web', 'star'];
const useIconCursor = (icons, initialCursor, isSync) => {
  const targetRef = (0, _react.useRef)(null);
  const [cursor, setCursor] = (0, _react.useState)(initialCursor);
  (0, _react.useEffect)(() => {
    const target = targetRef.current;
    const listener = () => {
      if (isSync()) {
        setCursor(c => (c + 2) % icons.length);
      }
    };
    if (target) {
      target.addEventListener('animationiteration', listener);
    }
    return () => {
      if (target) {
        target.removeEventListener('animationiteration', listener);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [icons]);
  return [icons[cursor], targetRef];
};
const IconsLoader = _ref => {
  let {
    baseClassName = `${_constants.CLS_PREFIX}icons-loader`,
    className,
    icons,
    size,
    style,
    ...props
  } = _ref;
  const syncRef = (0, _react.useRef)('icon1');
  if (!icons?.length) {
    icons = DEFAULT_ICONS;
  } else if (icons.length === 1) {
    icons = [icons[0], icons[0]];
  }
  const [icon1, icon1Ref] = useIconCursor(icons, 0, () => {
    if (syncRef.current === 'icon1') {
      syncRef.current = 'icon2';
      return true;
    }
    return false;
  });
  const [icon2, icon2Ref] = useIconCursor(icons, 1, () => {
    if (syncRef.current === 'icon2') {
      syncRef.current = 'icon1';
      return true;
    }
    return false;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(baseClassName, className),
    style: {
      ...style,
      ['--icons-loader-size']: size ? size : undefined
    },
    ...props,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(`${baseClassName}__icon`, `${baseClassName}__icon--1`),
      ref: icon1Ref,
      children: _Icon.default.create(icon1, {
        size: size ? size : '64'
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(`${baseClassName}__icon`, `${baseClassName}__icon--2`),
      ref: icon2Ref,
      children: _Icon.default.create(icon2, {
        size: size ? size : '64'
      })
    })]
  });
};
var _default = exports.default = IconsLoader;