import "core-js/modules/es.array.for-each.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/web.dom-collections.for-each.js";
import React, { useMemo, useRef, useEffect } from 'react';
import classNames from 'classnames';
import './index.css';
import { FcrIcon } from '../icon';
import { FcrIconType } from '../icon/type';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var FcrActionPhone = function FcrActionPhone(_ref) {
  var size = _ref.size,
    icon = _ref.icon,
    wrapperColor = _ref.wrapperColor,
    circleColor = _ref.circleColor,
    _ref$animate = _ref.animate,
    animate = _ref$animate === void 0 ? true : _ref$animate,
    iconColors = _ref.iconColors;
  var wrapperRef = useRef(null);
  var circleRefs = useRef([/*#__PURE__*/React.createRef(), /*#__PURE__*/React.createRef(), /*#__PURE__*/React.createRef()]);
  useEffect(function () {
    if (wrapperRef.current && wrapperColor) {
      wrapperRef.current.style.setProperty('background-color', wrapperColor);
    }
    circleRefs.current.forEach(function (ref) {
      if (ref.current && circleColor) {
        ref.current.style.setProperty('background-color', circleColor);
      }
    });
  }, [wrapperColor, circleColor]);
  var wrapperCls = classNames('fcr-action-phone-wrapper', {
    'fcr-action-phone-wrapper-l': size === 'large',
    'fcr-action-phone-wrapper-m': size === 'medium',
    'fcr-action-phone-wrapper-s': size === 'small'
  });
  var iconSize = useMemo(function () {
    return size === 'large' ? 48 : size === 'small' ? 18 : 32;
  }, [size]);
  var circleCls = classNames('fcr-action-phone-circle', {
    'fcr-action-phone-circle-animation': animate
  });
  return /*#__PURE__*/_jsxs("div", {
    ref: wrapperRef,
    className: wrapperCls,
    children: [/*#__PURE__*/_jsx("div", {
      ref: circleRefs.current[0],
      className: circleCls
    }), /*#__PURE__*/_jsx("div", {
      ref: circleRefs.current[1],
      className: circleCls
    }), /*#__PURE__*/_jsx("div", {
      ref: circleRefs.current[2],
      className: circleCls
    }), /*#__PURE__*/_jsx("div", {
      className: "fcr-action-phone-icon",
      children: icon ? icon : /*#__PURE__*/_jsx(FcrIcon, {
        type: FcrIconType.FCR_PHONECALL3,
        size: iconSize,
        colors: iconColors
      })
    })]
  });
};