import { jsx, Fragment } from 'react/jsx-runtime';
import { forwardRef, useRef, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import Components from './iconList.js';

const Icon = /*#__PURE__*/forwardRef(({
  name,
  height,
  width,
  onClick = () => {},
  color = 'var(--brand-color)',
  // Default color
  hoverEffect = false,
  className = '',
  disabled = false,
  variant = 'light',
  isSelected = false,
  x,
  y,
  chartIcon = false,
  tabIndex = -1,
  ...props
}, ref) => {
  const IconComponent = Components[name];
  const iconHeight = height || 16;
  const iconWidth = width || 16;
  if (!IconComponent) {
    return null;
  }
  const iconRef = useRef(null);
  useEffect(() => {
    if (iconRef.current) {
      if (x !== undefined) {
        iconRef.current.setAttribute('x', String(x));
      }
      if (y !== undefined) {
        iconRef.current.setAttribute('y', String(y));
      }
    }
  }, [x, y]);
  const iconColor = variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : color;
  const baseProps = {
    ref: iconRef,
    onClick: disabled ? () => {} : onClick,
    style: {
      height: `${iconHeight}px`,
      width: `${iconWidth}px`,
      cursor: disabled ? 'not-allowed' : hoverEffect ? 'pointer' : 'default'
    },
    className: classNames('ff-icon-container', {
      'ff-icon-click': hoverEffect,
      'ff-icon-disabled': disabled,
      'ff-icon-selected': isSelected,
      'ff-icon-dark': variant === 'dark',
      'ff-icon-danger': variant === 'danger',
      [className]: !!className
    }),
    tabIndex: tabIndex,
    ...props
  };
  return jsx(Fragment, {
    children: chartIcon === false ? jsx("span", {
      ...baseProps,
      ref: ref,
      children: jsx(IconComponent, {
        height: "100%",
        width: "100%",
        style: {
          color: iconColor
        }
      })
    }) : jsx("svg", {
      ...baseProps,
      children: jsx(IconComponent, {
        style: {
          color: color
        },
        height: height,
        width: width
      })
    })
  });
});

export { Icon as default };
//# sourceMappingURL=Icon.js.map
