import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import "./style.scss";
import User from "../Svg/User";
import GraduationHat from "../Svg/GraduationHat";
import Company from "../Svg/Company";
import CompanyPlaceholderAvatar from "../Svg/CompanyPlaceholderAvatar";
import ProfilePlaceholderAvatar from "../Svg/ProfilePlaceholderAvatar";
const CircularIcon = ({ iconPath = "", iconSize = "24", className, altImageType = "profile", key, lazy = false, companyName, educationName, }) => {
    const [error, setError] = useState(false);
    const companyInitial = companyName?.trim().charAt(0).toUpperCase();
    const educationInitial = educationName?.trim().charAt(0).toUpperCase();
    const showCompanyInitial = altImageType === "company" && Boolean(companyInitial);
    const showEducationInitial = altImageType === "education" && Boolean(educationInitial);
    const showInitial = showCompanyInitial || showEducationInitial;
    const initial = showCompanyInitial ? companyInitial : educationInitial;
    const initialStyle = {
        "--company-initial-size": `${iconSize}px`,
    };
    useEffect(() => {
        if (!iconPath) {
            setError(true);
        }
        else {
            setError(false);
        }
    }, [iconPath]);
    const getPlaceHolder = (type) => {
        if (type === "profile") {
            return _jsx(User, { width: iconSize, height: iconSize });
        }
        else if (type === "company") {
            if (showCompanyInitial) {
                return _jsx("span", { className: "companyInitialText", children: initial });
            }
            return _jsx(Company, { width: iconSize, height: iconSize });
        }
        else if (type === "education") {
            if (showEducationInitial) {
                return _jsx("span", { className: "companyInitialText", children: initial });
            }
            return _jsx(GraduationHat, { width: iconSize, height: iconSize });
        }
        else if (type === "companyPlaceholderAvatar") {
            return _jsx(CompanyPlaceholderAvatar, { width: iconSize, height: iconSize });
        }
        else if (type === "profilePlaceholderAvatar") {
            return _jsx(ProfilePlaceholderAvatar, { width: iconSize, height: iconSize });
        }
        return _jsx(User, { width: iconSize, height: iconSize });
    };
    if (!error) {
        return (_jsx("img", { className: `circularIcon ${className ? ` ${className}` : ""}`, width: iconSize, height: iconSize, src: iconPath, loading: lazy ? "lazy" : "eager", onError: () => {
                console.log("ERROR OCCURED");
                setError(true);
            } }, key));
    }
    else {
        if (showInitial) {
            return (_jsx("div", { className: "companyInitial", style: initialStyle, children: getPlaceHolder(altImageType) }));
        }
        return (_jsx("div", { style: {
                width: iconSize + "px",
                height: iconSize + "px",
            }, className: "placeholder", children: getPlaceHolder(altImageType) }));
    }
};
export default CircularIcon;
