import { jsx as _jsx } from "react/jsx-runtime";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useEffect, useState, } from 'react';
import styled, { css } from 'styled-components';
import { Loader } from '../loader/Loader.component';
import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';
import { iconTable } from './iconTable';
// Module-level cache for imported icons
const iconCache = {};
export const customIcons = {
    'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
    'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
    Bucket: ({ 'aria-label': ariaLabel, color, size }) => (_jsx(Bucket, { ariaLabel: ariaLabel, color: color, size: size })),
    Buckets: ({ 'aria-label': ariaLabel, color, size }) => (_jsx(Buckets, { ariaLabel: ariaLabel, color: color, size: size })),
};
customIcons['Remote-user'].displayName = 'RemoteUser';
customIcons['Remote-group'].displayName = 'RemoteGroup';
customIcons['Bucket'].displayName = 'Bucket';
customIcons['Buckets'].displayName = 'Buckets';
const IconStyled = styled(FontAwesomeIcon) `
  ${(props) => {
    const theme = props.theme;
    if (props.color && theme[props.color]) {
        return css `
        color: ${theme[props.color]};
      `;
    }
}}
`;
const DelayedFallback = ({ children, ...rest }) => {
    const [show, setShow] = useState(false);
    useEffect(() => {
        let timeout = setTimeout(() => setShow(true), 300);
        return () => {
            clearTimeout(timeout);
        };
    }, []);
    return _jsx("i", { ...rest, children: show && children });
};
export const IconWrapper = styled.div `
  ${(props) => {
    const brand = props.theme;
    return css `
      color: ${brand.infoPrimary};
      border: 1px solid ${brand.infoPrimary};
      background: ${brand.backgroundLevel1};
      ${props.size === 'lg'
        ? `
        width: 2.5rem;
        height: 2.5rem;
      `
        : props.size === 'sm'
            ? `
        width: 1.75rem;
        height: 1.75rem;
      `
            : props.size === 'xs'
                ? `
        width: 1.5rem;
        height: 1.5rem;
      `
                : `
        width: ${parseInt(props.size.replace('x', '')) * 2}rem;
        height: ${parseInt(props.size.replace('x', '')) * 2}rem;
      `}
    `;
}}

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
`;
function NonWrappedIcon({ name, size = '1x', color, ariaLabel = '', title, ...rest }) {
    var _a;
    const iconInfo = iconTable[name] || customIcons[name];
    if (!iconInfo)
        throw new Error(`${name}: is not a valid icon.`);
    // Loaded fortawesome icon if not a custom icon
    const [icon, setIcon] = useState();
    useEffect(() => {
        if (customIcons[name]) {
            return;
        }
        const [iconType, iconClass] = iconInfo.split(' ');
        const fontAwesomeType = iconType === 'far' ? 'free-regular-svg-icons' : 'free-solid-svg-icons';
        const cacheKey = `${fontAwesomeType}/${iconClass}`;
        if (iconCache[cacheKey]) {
            setIcon(iconCache[cacheKey]);
            return () => setIcon(undefined);
        }
        // Handle FontAwesome icons with dynamic import
        import(
        /* webpackExclude: /import\.macro\.js$/ */
        `@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
            setIcon(module[iconClass]);
            iconCache[cacheKey] = module[iconClass];
        });
        return () => setIcon(undefined);
    }, [name, iconInfo]);
    if (!icon && !customIcons[name]) {
        return (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) }));
    }
    const IconComponent = (_a = customIcons[name]) !== null && _a !== void 0 ? _a : IconStyled;
    return (_jsx(IconComponent, { color: color, icon: icon, size: size, title: title, "aria-label": `${name} ${ariaLabel}`, ...rest }));
}
function Icon({ withWrapper, ...props }) {
    if (withWrapper) {
        return (_jsx(IconWrapper, { size: props.size || '1x', children: _jsx(NonWrappedIcon, { ...props }) }));
    }
    return _jsx(NonWrappedIcon, { ...props });
}
export { Icon, iconTable };
