import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import "./style.scss";
import { GetSvgIcon } from "..";
import { getFormatedDate } from "../../utils";
import { clsx } from "../../utils";
const ExperienceCard = ({ iconUrl = "", position = "", company = "", from = "", to = "", universalName = "", urn = "", onExperienceCompanyClick, isFirstExperience, isLastExperience, }) => {
    const [error, setError] = useState(false);
    useEffect(() => {
        if (!iconUrl) {
            setError(true);
        }
        else {
            setError(false);
        }
    }, [iconUrl]);
    const showExperienceRange = !!from;
    const onlyExperienceInCompany = isFirstExperience && isLastExperience;
    const showBefore = !isFirstExperience && !onlyExperienceInCompany;
    const showAfter = !isLastExperience && !onlyExperienceInCompany;
    const cardClass = clsx({
        ["experienceCard--Assignment"]: true,
        ["experienceCard--Assignment--Before"]: showBefore,
        ["experienceCard--Assignment--After"]: showAfter && !isFirstExperience,
        ["experienceCard--Assignment--FirstExpAfter"]: showAfter && isFirstExperience,
    });
    return (_jsxs("div", { className: cardClass, children: [_jsx("div", { className: "logoWrapper", children: isFirstExperience &&
                    (error ? (_jsx("div", { className: "companyPlaceholder", children: _jsx(GetSvgIcon, { iconSize: "40", iconType: "company" }) })) : (_jsx("img", { width: 40, height: 40, src: iconUrl, onError: () => {
                            setError(true);
                        } }))) }), _jsxs("span", { className: "experienceCardDetails", children: [_jsx("span", { className: "header", children: _jsxs("p", { children: [_jsx("span", { children: position }), isFirstExperience && (_jsxs(_Fragment, { children: [_jsx("span", { children: " at " }), _jsx("span", { onClick: () => {
                                                onExperienceCompanyClick(universalName, urn);
                                            }, className: "company", children: company })] }))] }) }), showExperienceRange && (_jsxs("p", { className: "date", children: [getFormatedDate(from), " - ", getFormatedDate(to)] }))] })] }));
};
export default ExperienceCard;
