import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import User from "../Svg/User";
import GraduationHat from "../Svg/GraduationHat";
import Company from "../Svg/Company";
import "./style.scss";
import Product from "../Svg/products";
import News from "../Svg/News";
import Box from "../Svg/Box";
const RectangularIcon = ({ iconPath = "", iconSize = "24", borderRadius = "6", placeholderSize = 32, placeholderPadding = 4, padding = 0, altImageType = "profile", companyName, educationName, }) => {
    const [error, setError] = useState(!iconPath);
    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`,
        borderRadius: `${borderRadius}px`,
    };
    const getPlaceHolder = (type) => {
        if (type === "profile") {
            return (_jsx(User, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        else if (type === "company") {
            if (showCompanyInitial) {
                return (_jsx("span", { className: "RectangularIcon--companyInitialText", children: initial }));
            }
            return (_jsx(Company, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        else if (type === "education") {
            if (showEducationInitial) {
                return (_jsx("span", { className: "RectangularIcon--companyInitialText", children: initial }));
            }
            return (_jsx(GraduationHat, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        else if (type === "products") {
            return (_jsx(Product, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        else if (type === "news") {
            return (_jsx(News, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        else if (type === "box") {
            return (_jsx(Box, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
        }
        return (_jsx(User, { width: placeholderSize.toString(), height: placeholderSize.toString() }));
    };
    useEffect(() => {
        if (!iconPath) {
            setError(true);
        }
        else {
            setError(false);
        }
    }, [iconPath]);
    if (!error) {
        return (_jsx("img", { style: {
                borderRadius: `${borderRadius}px`,
                padding: `${padding}px`,
            }, className: "RectangularIcon--Generic", width: iconSize, height: iconSize, src: iconPath, onError: () => {
                setError(true);
            } }));
    }
    else {
        if (showInitial) {
            return (_jsx("div", { className: "RectangularIcon--companyInitial", style: initialStyle, children: getPlaceHolder(altImageType) }));
        }
        return (_jsx("div", { className: "RectangularIcon--placeholder", style: {
                borderRadius: `${borderRadius}px`,
                padding: `${placeholderPadding}px`,
            }, children: getPlaceHolder(altImageType) }));
    }
};
export default RectangularIcon;
