import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import Dynamictext from "./Dynamictext";
import loading_gif from '../assets/images/loading.gif';
import Messagedisplay from "./Messagedisplay";
import sad_face from '../assets/images/sad.png';
import happy_face from '../assets/images/happy.png';
import copy_icon from '../assets/images/copy.png';
import regenerate_icon from '../assets/images/regenerate.png';
import like_icon from '../assets/images/like.png';
import dislike_icon from '../assets/images/dislike.png';
import like_neutral_icon from '../assets/images/like-neutral.png';
import dislike_neutral_icon from '../assets/images/dislike-neutral.png';
import { defaultTheme } from "../constants";
const Message = (props) => {
    const [scale, setScale] = useState(0);
    const templates = useRef([
        { id: "text", component: Text },
        { id: "noinfo", component: Noinfo },
        { id: "fetching", component: Fetching },
        { id: "followup", component: Followupquestions },
        { id: "invalid-client", component: Invalidclient }
    ]).current;
    const Content = templates.find((template) => template.id == props.template)?.component;
    const theme = props.theme ? props.theme : defaultTheme;
    useEffect(() => {
        setScale(1);
    }, []);
    const copyMessage = () => {
        alert("Message Copied!");
        navigator.clipboard.writeText(props.data.content);
    };
    const regenerateMessage = () => {
        props.eventHandler({ name: "regenerate-response", data: { id: props.id } });
    };
    const react = (reaction) => {
        props.eventHandler({ name: "react", data: { id: props.id, reaction: reaction } });
    };
    return (_jsxs("div", { className: "avamodule-message-wrapper", style: { transform: "scale(" + scale + ")", justifyContent: props.sender == "ava" ? "flex-start" : "flex-end" }, children: [_jsx("div", { className: "avamodule-message-subwrapper", style: { justifyContent: props.sender == "ava" ? "flex-start" : "flex-end", backgroundColor: (props.template != "noinfo" && props.template != "followup") ? (props.sender == "ava" ? (theme.avaMessageBox.backgroundColor) : theme.clientMessageBox.backgroundColor) : "white" }, children: Content
                    ?
                        _jsx(Content, { eventHandler: props.eventHandler, ...props.data, agent: props.agent, client: props.client, theme: theme, sender: props.sender })
                    :
                        null }), _jsx("div", { className: "avamodule-footer-wrapper", style: { justifyContent: props.sender == "ava" ? "flex-start" : "flex-end" }, children: _jsxs("div", { className: "avamodule-actions-wrapper", style: { display: (props.sender == "ava" && props.template == "text") ? "flex" : "none" }, children: [!props.reaction
                            ?
                                _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => react("like"), style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: like_neutral_icon, className: 'avamodule-action-icon' }) }), _jsx("button", { onClick: () => react("dislike"), style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: dislike_neutral_icon, className: 'avamodule-action-icon' }) })] })
                            :
                                _jsx("button", { style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { className: 'avamodule-action-icon', src: props.reaction == "like" ? like_icon : dislike_icon }) }), _jsx("button", { onClick: regenerateMessage, style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: regenerate_icon, className: 'avamodule-action-icon' }) }), _jsx("button", { onClick: copyMessage, style: { backgroundColor: 'transparent', border: "none", padding: 0 }, children: _jsx("img", { src: copy_icon, className: 'avamodule-action-icon' }) })] }) })] }));
};
const Fetching = (props) => {
    //console.log("Infio",JSON.stringify(props));
    return (_jsxs("div", { style: { gap: "20px" }, children: [_jsx("div", { style: { backgroundColor: props.theme.avaMessageBox.backgroundColor }, children: _jsx("img", { src: happy_face, className: "avamodule-sadface" }) }), _jsx("div", { style: { display: "flex", flexDirection: "row", gap: "5px" }, children: _jsx("img", { src: loading_gif, className: "avamodule-loader" }) }), props.agent.personalInfo.facts?.length > 0
                ?
                    _jsx(Dynamictext, { timePeriod: 4000, style: { margin: 0, color: props.theme.avaMessageBox.textColor, fontFamily: "Neutrif-Regular_Italic" }, list: props.agent.personalInfo.facts.map((fact) => ("' " + fact + " '")) })
                :
                    null] }));
};
const Text = (props) => {
    return (_jsx("div", { style: { display: "flex", flexDirection: "row", alignItems: "flex-end" }, children: _jsx(Messagedisplay, { theme: props.theme, content: props.content, sender: props.sender }) }));
};
const Noinfo = (props) => {
    const redirect = () => {
        window.open("https://admissions.cbu.edu/register/request-more-info", "_blank");
    };
    //console.log("follow up",props.followupQuestions);
    return (_jsxs("div", { style: { display: "flex", position: "relative", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", gap: "10px" }, children: [_jsxs("div", { style: { padding: "15px", borderRadius: "20px", backgroundColor: props.theme.avaMessageBox.backgroundColor }, children: [_jsx("img", { src: sad_face, className: "avamodule-sadface" }), _jsx("p", { className: "avamodule-message-content", style: { color: props.theme.avaMessageBox.textColor }, children: props.content })] }), _jsx("a", { onClick: redirect, className: "avamodule-message-content", style: { fontFamily: "Neutrif-Medium", textDecoration: "underline" }, children: "Click here to reach us out!" })] }));
};
const Invalidclient = () => {
    const redirect = () => {
        window.open("https://ava-website-nu.vercel.app", "_blank");
    };
    return (_jsxs("div", { style: { display: "flex", position: "relative", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", gap: "10px" }, children: [_jsx("img", { src: sad_face, className: "avamodule-sadface" }), _jsx("p", { className: "avamodule-message-content", children: "Oops! Invalid client id" }), _jsx("a", { onClick: redirect, className: "avamodule-message-content", style: { fontFamily: "Neutrif-Medium", textDecoration: "underline" }, children: " Need help? " })] }));
};
const Followupquestions = (props) => {
    return (_jsxs("div", { className: "avamodule-message-followup-wrapper", children: [_jsx("p", { className: "avamodule-message-content", children: props.content }), _jsx("div", { className: "avamodule-message-followup-body", children: props.questions.map((q) => _jsx("button", { style: { backgroundColor: props.theme.avaMessageBox.backgroundColor }, className: "avamodule-message-followup-button", onClick: () => props.eventHandler({ name: "send-message", data: { msg: q.text } }), children: _jsx("p", { style: { color: props.theme.avaMessageBox.textColor }, children: q.text }) })) })] }));
};
export default Message;
//# sourceMappingURL=Message.js.map