import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import "./style.scss";
import { detectEntitiesInDescription, dummyExpDetails, getDetectedIndustries, getFormatedDate, getSelectedProductsForCompany, detectSentences, detectEntitiesInDescriptionWithSlop, splitTruncatedTextByKeyWordsWithSlop, highlightRichTextWithSlop, splitTextByKeyWordsWithSlop, } from "../../../utils";
import SkillIndustryBadge from "../../SkillIndustryBadge";
import { Loader, Tooltip } from "../..";
import clsx from "clsx";
const PersonViewExperienceDetails = ({ experienceDetails = dummyExpDetails, showCompanyName = true, onCompanyNameClick, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading, singleExperience, companyExp, isSummaryView = false, dataCy, productsObject, }) => {
    const { universalName, urn, role } = experienceDetails;
    const id = crypto.randomUUID();
    const [hoveredPill, setHoveredPill] = useState(null);
    const { start, end } = experienceDetails;
    const undefinedExpEdgeCase = "undefined-undefined";
    const showExperienceRange = start !== undefinedExpEdgeCase && end !== undefinedExpEdgeCase;
    const experiencePeriod = showExperienceRange
        ? `${getFormatedDate(start)} - ${getFormatedDate(end)}`
        : "";
    const descriptionIndustries = detectEntitiesInDescriptionWithSlop(experienceDetails.description, filterIndustries);
    const detectedIndustries = getDetectedIndustries({
        experienceIndustriesFromTitle: detectEntitiesInDescription(experienceDetails.role, filterIndustries),
        experienceIndustries: descriptionIndustries,
        companyIndustries: [
            ...(typeof experienceDetails.specialities === "object"
                ? experienceDetails.specialities
                : []),
            ...experienceDetails.industries,
        ],
        filterIndustries: filterIndustries,
    });
    let roleProductMatches = detectEntitiesInDescription(role, filterProducts);
    const roleSkillMatches = detectEntitiesInDescriptionWithSlop(role, filterSkills);
    const companyProducts = getSelectedProductsForCompany(universalName, urn, end.toLowerCase() === "now", productsObject);
    const companyProductsMap = new Map(companyProducts.map((product) => [product.toLowerCase(), true]));
    roleProductMatches = roleProductMatches.filter((product) => companyProductsMap.has(product.toLowerCase()));
    const splittedTitleText = splitTextByKeyWordsWithSlop(detectSentences(experienceDetails.role), roleSkillMatches, roleProductMatches);
    let detectedSkills = detectEntitiesInDescriptionWithSlop(experienceDetails.description, Array.from(new Set(filterSkills)));
    const detectedSkillsSet = new Set([...detectedSkills, ...roleSkillMatches]);
    detectedSkills = [...detectedSkillsSet];
    const detectedProducts = detectEntitiesInDescription(experienceDetails.description, Array.from(new Set(filterProducts)));
    let filteredDetectedProducts = detectedProducts.filter((product) => companyProductsMap.has(product.toLowerCase()));
    const filteredDetectedProductsSet = new Set([
        ...filteredDetectedProducts,
        ...roleProductMatches,
    ]);
    filteredDetectedProducts = [...filteredDetectedProductsSet];
    const showDescriptionSkills = detectedSkills.length > 0;
    const showDescriptionProducts = filteredDetectedProducts.length > 0;
    const keyWords = [
        ...detectedIndustries.map((industry) => industry.industry),
        ...detectedSkills,
    ];
    const getClassesWithSlop = (phraseIds) => clsx({
        ["highlight"]: true,
        ["hover"]: hoveredPill !== null && phraseIds.includes(hoveredPill.toLowerCase()),
    });
    const highlightedTitleText = highlightRichTextWithSlop(splittedTitleText, roleSkillMatches, getClassesWithSlop, experienceDetails.role, roleProductMatches);
    const handleHoverPill = (text, _type, action) => {
        if (action === "enter") {
            setHoveredPill(text);
        }
        else if (action === "leave") {
            setHoveredPill(null);
        }
    };
    const hasDescriptionData = !!experienceDetails.description?.trim();
    const paragraphs = experienceDetails.description.trim().split("\n");
    const shouldHighlight = keyWords.length > 0 || filteredDetectedProducts.length > 0;
    const descriptionContent = paragraphs.map((paragraph, i) => {
        const trimmedParagraph = paragraph.trim();
        const highlightedText = shouldHighlight
            ? highlightRichTextWithSlop(splitTruncatedTextByKeyWordsWithSlop(trimmedParagraph, keyWords, filteredDetectedProducts).map((text) => text.toString()), keyWords, getClassesWithSlop, trimmedParagraph, filteredDetectedProducts)
            : trimmedParagraph;
        return _jsx("p", { children: highlightedText }, `paragraph-${i}`);
    });
    const hasMatchedKeywordsData = detectedIndustries.length > 0 ||
        showDescriptionSkills ||
        showDescriptionProducts;
    return (_jsxs("div", { className: "personViewExperienceDetails--Generic", children: [_jsxs("div", { className: "personViewExperienceDetails--NameAndDuration", children: [showCompanyName && (_jsx("h2", { className: "personViewExperienceDetailsCompanyName", onClick: () => {
                            onCompanyNameClick(experienceDetails.universalName, experienceDetails.urn);
                        }, "data-cy": `${dataCy}-company`, children: experienceDetails.companyName })), showCompanyName && (_jsx("span", { className: "expDuration", children: companyExp.duration })), _jsx("h3", { className: "title", children: highlightedTitleText.length !== 0
                            ? highlightedTitleText
                            : experienceDetails.role }), singleExperience && (_jsx("h2", { className: "personViewExperienceDetailsCompanyName", onClick: () => {
                            onCompanyNameClick(experienceDetails.universalName, experienceDetails.urn);
                        }, "data-cy": `${dataCy}-company`, children: experienceDetails.companyName })), _jsxs("span", { className: "expPeriod", children: [experiencePeriod, " ", experienceDetails.duration && experiencePeriod && _jsx(_Fragment, { children: "\u2022" }), " ", experienceDetails.duration] }), _jsx("span", { children: experienceDetails.location })] }), hasDescriptionData && !isSummaryView && (_jsx("div", { id: id, className: "personViewExperienceDetails--Description", children: descriptionContent })), hasMatchedKeywordsData && (_jsx("div", { className: "personViewExperienceDetails--MatchedKeywords", children: isExpIndustriesLoading ? (_jsx(Loader, { width: "24", height: "24" })) : (_jsxs(_Fragment, { children: [showDescriptionProducts && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "COMPANY PRODUCT: " }), _jsx("span", { children: filteredDetectedProducts.map((product, key) => (_jsx(Tooltip, { content: "Extracted from experience", toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: false, text: product }) }, key))) })] })), detectedIndustries.length > 0 && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "INDUSTRIES MATCHED: " }), _jsx("span", { children: detectedIndustries.map((industry, index) => (_jsx(Tooltip, { content: industry.source, toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: false, text: industry.industry }) }, index))) })] })), showDescriptionSkills && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "KEYWORDS/SKILLS: " }), _jsx("span", { children: detectedSkills.map((skill, key) => (_jsx(Tooltip, { content: "Extracted from experience", toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: false, text: skill }) }, key))) })] }))] })) }))] }));
};
export default PersonViewExperienceDetails;
