import { Button, ModalFooter, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
import { Undo } from "@carbon/react/icons";
import React, { useEffect, useState } from "react";
import { Feedback } from "./tabs/feedback";
import { TabContent } from "./tabs/tabContent";
import { getTiles } from "../../api/help-center";
import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
import { useC3HelpCenter } from "./c3-help-center-provider";
import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
import { StyledModalBody, StyledModalHeader } from "./styles";
import styled from "styled-components";
const StyledModalFooter = styled(ModalFooter) `
	height: 62px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px;
	border-style: solid;
	border-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#E0E0E0" : "#727272"};
	background-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#FFFFFF" : "#161616"};
`;
export const HelpCenter = ({ configuration, persona, email, audience, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
    const { tabs } = configuration;
    const firstTab = tabs[0].id;
    const { userToken: token, activeOrganizationId, domain, } = useC3UserConfiguration();
    const { activeOrg: organization, clusters } = useC3Profile();
    const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
    const { showTabId } = useC3HelpCenter();
    const [activeTab, setActiveTab] = useState(firstTab);
    const [rawTabTiles, setRawTabTiles] = useState({});
    const [tabTiles, setTabTiles] = useState({});
    const [isLoadingTiles, setIsLoadingTiles] = useState(false);
    let header = "";
    let content = React.createElement(React.Fragment, null);
    React.useEffect(() => {
        ;
        (async () => {
            const tiles = {};
            setIsLoadingTiles(true);
            for (const singleTab of tabs) {
                if (token) {
                    const { result } = await getTiles({
                        tileConfig: singleTab.tiles,
                        cloudAudience: audience,
                        persona,
                        clusterIds,
                        salesPlanType: organization?.salesPlan?.type ?? "",
                        flags,
                        accessToken: token,
                    });
                    if (result)
                        tiles[singleTab.id] = result;
                }
            }
            setIsLoadingTiles(false);
            setRawTabTiles(tiles);
        })();
    }, [
        token,
        JSON.stringify(persona),
        audience,
        JSON.stringify(organization),
        JSON.stringify(clusters),
        JSON.stringify(tabs),
    ]);
    useEffect(() => {
        if (!tabs || !rawTabTiles)
            return;
        const tiles = {};
        for (const tab of tabs) {
            if (rawTabTiles[tab.id])
                tiles[tab.id] =
                    rawTabTiles[tab.id]?.map((card) => {
                        if (domain)
                            card.link = card.link?.replaceAll("{cloudAudience}", domain);
                        card.link = card.link?.replaceAll("{currentOrgId}", activeOrganizationId);
                        card.link = card.link?.replaceAll("{clusterId}", clusterIds[0]);
                        card.link = card.link?.replaceAll("{email}", email);
                        return card;
                    }) || [];
        }
        setTabTiles(tiles);
    }, [JSON.stringify(rawTabTiles), email, domain]);
    useEffect(() => {
        setActiveTab(initialTab ?? firstTab);
    }, [initialTab]);
    useEffect(() => {
        if (showTabId) {
            setActiveTab(showTabId);
        }
    }, [showTabId]);
    if (activeTab === "feedback") {
        header = "Share your feedback";
    }
    else if (activeTab === "recommendations" &&
        Object.keys(tabTiles).length === 0 &&
        isLoadingTiles) {
        header = "Your recommendations";
        content = React.createElement(TabContentSkeleton, null);
    }
    else if (activeTab === "recommendations" &&
        Object.keys(tabTiles).length === 0) {
        header = "";
        content = (React.createElement("div", { style: {
                height: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            } },
            React.createElement("div", { style: {
                    height: "200px",
                    width: "450px",
                } },
                React.createElement(Stack, { orientation: "horizontal", gap: 6 },
                    React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                        React.createElement("path", { d: "M22.5379 14.9379C22.5379 9.46436 26.9851 5.0171 32.4587 5.0171C37.9322 5.0171 42.3795 9.46436 42.3795 14.9379C42.3795 20.4115 37.9322 24.8587 32.4587 24.8587C26.9851 24.8587 22.5379 20.3944 22.5379 14.9379ZM53.4976 38.7137L51.445 59H13.4723L11.4197 38.7137H20.5024V34.5743L10 26.86V5H16.3288V23.6443L24.5733 29.6994H41.4045L44.415 33.8046V38.7308L53.4976 38.7137ZM36.1704 48.8568C36.1704 46.8042 34.5112 45.1451 32.4587 45.1451C30.4061 45.1451 28.7469 46.8042 28.7469 48.8568C28.7469 50.9094 30.4061 52.5686 32.4587 52.5686C34.5112 52.5686 36.1704 50.9094 36.1704 48.8568Z", fill: "#FC5D0D" })),
                    React.createElement(Stack, { gap: 3 },
                        React.createElement("h2", null, "Personalize your experience"),
                        React.createElement(Stack, { gap: 6 },
                            React.createElement("p", { style: { maxWidth: "400px" } }, "Complete a 1-minute survey to access personalized next steps and educational content designed for you"),
                            React.createElement(Stack, { gap: 3 },
                                React.createElement(Button, { id: "additional-feedback-button", size: "md", onClick: () => {
                                        onRequestRetakeSurvey();
                                    } }, "Start now"))))))));
    }
    else {
        const tab = configuration.tabs.find((tab) => tab.id === activeTab);
        header = tab?.title ?? "";
        if (tabTiles[activeTab]) {
            content = (React.createElement(TabContent, { onboarding: (() => {
                    if (activeTab === "recommendations") {
                        return {
                            complete: persona.complete || false,
                            resumeSurvey: onRequestResumeSurvey,
                        };
                    }
                    else {
                        return undefined;
                    }
                })(), origin: origin, type: tab?.tiletype || "grid", tiles: tabTiles[activeTab], mixpanelTrack: mixpanelTrack, salesPlanType: organization?.salesPlan?.type ?? "" }));
        }
    }
    const tabBar = [
        ...configuration.tabs.map(({ id, label }) => ({
            id,
            name: id,
            text: label,
        })),
        { id: "feedback", name: "feedback", text: "Share your feedback" },
    ];
    return (React.createElement(React.Fragment, null,
        React.createElement(StyledModalHeader, { title: "", label: "", closeModal: onRequestClose, style: {
                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                marginBottom: "0",
            } },
            React.createElement("h4", { style: { marginLeft: "16rem" } }, header)),
        React.createElement(StyledModalBody, { style: {
                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                marginBottom: 0,
            } },
            React.createElement("div", { style: {
                    height: persona.complete && activeTab === "recommendations"
                        ? "634px"
                        : "696px",
                } },
                React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
                    React.createElement(SideNavItems, null,
                        React.createElement(SideNavMenuItem, null,
                            React.createElement("h5", null, "Help Center")),
                        React.createElement("li", { style: { marginTop: "4px" } },
                            React.createElement(Stack, null,
                                React.createElement("ul", null, tabBar.map(({ name, id, text }) => {
                                    const active = activeTab === name;
                                    let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
                                    let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
                                    if (active) {
                                        tabBackgroundColor =
                                            theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
                                        tabButtonColor =
                                            theme === "light" ? "#161616" : "#f4f4f4";
                                    }
                                    return (React.createElement("li", { key: name },
                                        React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
                                                setActiveTab(name);
                                                mixpanelTrack?.("helpcenter:open", {
                                                    to: id,
                                                    from: origin,
                                                });
                                            }, style: {
                                                width: "100%",
                                                backgroundColor: tabBackgroundColor,
                                                color: tabButtonColor,
                                            }, "aria-label": text }, text)));
                                })))),
                        React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
                            React.createElement("ul", null, configuration.links?.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, 
                                // eslint-disable-next-line
                                // @ts-ignore
                                target: "_blank" },
                                React.createElement("span", { className: "cds--link" }, link.label)))))))),
                content,
                React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
                    React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
                            header = head;
                        }, salesPlanType: organization?.salesPlan?.type ?? "" })))),
        persona.complete && activeTab === "recommendations" && (React.createElement(StyledModalFooter, { "$hcTheme": theme },
            React.createElement("div", null,
                React.createElement(Button, { kind: "tertiary", renderIcon: Undo, onClick: onRequestRetakeSurvey, size: "sm", style: {
                        maxWidth: "200px",
                        height: "32px",
                        alignItems: "center",
                        paddingTop: "0px",
                        paddingBottom: "0px",
                        marginRight: "6px",
                    } }, "Retake the survey"))))));
};
