import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import "./style.scss";
import { GetSvgIcon, SkillIndustryBadge, Tooltip } from "..";
import { getFormatedDate, getUniqueIndustries } from "../../utils";
import clsx from "clsx";
const ProfileExperienceCard = ({ iconUrl = "", iconAltText = "", position = "", company = "", from = "", to = "", universalName = "", urn = "", onExperienceCompanyClick, industries = [], expIndustries = [], expSkills = [], expNumber = 0, totalExpInCompany = 0, location = "", }) => {
    const [error, setError] = useState(false);
    const undefinedExpEdgeCase = "undefined-undefined";
    const showExperienceRange = !!from && to !== undefinedExpEdgeCase && from !== undefinedExpEdgeCase;
    const isFirstExperience = expNumber === 0;
    const isLastExperience = expNumber === totalExpInCompany - 1;
    const onlyExperienceInCompany = isFirstExperience && isLastExperience;
    const showBefore = !isFirstExperience && !onlyExperienceInCompany;
    const showAfter = !isLastExperience && !onlyExperienceInCompany;
    const className = clsx({
        experienceCard: true,
        "experienceCard-Before": showBefore,
        "experienceCard-After": showAfter && !isFirstExperience,
        "experienceCard-FirstExpAfter": showAfter && isFirstExperience,
    });
    const uniqueIndustries = getUniqueIndustries({ industries, expIndustries });
    return (_jsxs("div", { className: className, children: [_jsx("span", { children: isFirstExperience && (_jsx(_Fragment, { children: error || !iconUrl ? (_jsx("div", { className: "companyPlaceholder", children: _jsx(GetSvgIcon, { iconSize: "40", iconType: "company" }) })) : (_jsx("img", { width: 40, height: 40, src: iconUrl, alt: iconAltText, 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)] })), _jsx("span", { className: "location", children: location }), uniqueIndustries?.length !== 0 && isFirstExperience && (_jsxs("span", { className: "expSkillsAndIndustries", children: [_jsx("h2", { children: "INDUSTRIES" }), _jsx("span", { children: uniqueIndustries.map((industry, key) => (_jsx(Tooltip, { content: industry.source, toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlightPill: true, text: industry.industry }, key) }))) })] })), expSkills?.length !== 0 && (_jsxs("span", { className: "expSkillsAndIndustries", children: [_jsx("h2", { children: "Keywords/Skills" }), _jsx("span", { children: expSkills?.map((skill, key) => {
                                    return (_jsx(SkillIndustryBadge, { highlightPill: true, text: skill }, key));
                                }) })] }))] })] }));
};
export default ProfileExperienceCard;
