import React from 'react';
import { loadOakIconReactComponent, resolveOakIconColorClass, resolveOakIconNameClass, resolveOakIconReactComponent, resolveOakIconStyle, } from '../../utils/iconLibrary';
import './web.less';
export default function Render(props) {
    const { data } = props;
    const { name, color = '', size, oakClass, style = {} } = data;
    const SyncReactIcon = resolveOakIconReactComponent(name);
    const [AsyncReactIcon, setAsyncReactIcon] = React.useState();
    React.useEffect(() => {
        setAsyncReactIcon(undefined);
        if (SyncReactIcon) {
            return;
        }
        let mounted = true;
        const promise = loadOakIconReactComponent(name);
        if (!promise) {
            return () => {
                mounted = false;
            };
        }
        promise.then((Component) => {
            if (mounted) {
                setAsyncReactIcon(() => Component);
            }
        });
        return () => {
            mounted = false;
        };
    }, [name, SyncReactIcon]);
    let class_name = 'oak-icon';
    const ReactIcon = SyncReactIcon || AsyncReactIcon;
    const iconNameClass = resolveOakIconNameClass(name);
    const iconColorClass = resolveOakIconColorClass(color);
    if (!ReactIcon && iconNameClass) {
        class_name += ' ' + iconNameClass;
    }
    if (iconColorClass) {
        class_name += ' ' + iconColorClass;
    }
    if (oakClass) {
        class_name += ' ' + oakClass;
    }
    if (ReactIcon) {
        return (<ReactIcon className={class_name} style={resolveOakIconStyle(color, size, style)}/>);
    }
    return (<span className={class_name} style={resolveOakIconStyle(color, size, style)}></span>);
}