import React from 'react';

import {Tooltip} from "react-tooltip";
import '../../styles/styles.scss';

const SOCIAL_MEDIA_BREAKPOINTS = {
    Twitter: 11.06,
    Instagram: 11.93
}

const SOCIAL_MEDIA_MATRIX = {
    Twitter: [
        'Social_Media_Influence',
        null,
        'Tweet_Views_Relative_to_Average',
        'Tweet_Reposts_Relative_to_Average',
        'Tweet_Quotes_Relative_to_Average',
        'Tweet_Likes_Relative_to_Average',
        'Tweet_Bookmarks_Relative_to_Average',
        null,
        'Tweet_Views',
        'Tweet_Reposts',
        'Tweet_Quotes',
        'Tweet_Likes',
        'Tweet_Bookmarks',
    ],
    Instagram: [
        "Social_Media_Influence",
        null,
        "Post_Comments_Relative_to_Average",
        "Post_Likes_Relative_to_Average",
        null,
        "Post_Comments",
        "Post_Likes",
    ]
}
const SocialMediaTooltips = ({product}) => {
    const {socialMedia, name} = product;
    const getTooltips = () => Object.keys(socialMedia)
        .map(key => {
            return {...socialMedia[key], type: key}
        })
        .sort((prev, current) => current.Social_Media_Influence - prev.Social_Media_Influence)
        .map((smi, i) => smi.found ? (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name + i}>
            <div
                className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`}
            >
                {smi.Social_Media_Influence}
            </div>
            <div className="tooltip__information"
                 data-tooltip-id={`${name}-${smi.type}`}
            >
                i
            </div>
            <Tooltip className="tooltip"
                     id={`${name}-${smi.type}`}
                     style={{
                         fontSize: "12px",
                         padding: "32px",
                         opacity: 1,
                         background: "#F0F0F0",
                         color: "#484848",
                         zIndex: 9999
                     }}
                     place="right-end">
                <h3 className="tooltip__title">{smi.type}</h3>
                {SOCIAL_MEDIA_MATRIX[smi.type]
                    .map((line, i) => {
                        return line ? (<div
                            className={`tooltip__data tooltip__data--${line}`}
                            key={line + name + i}>
                            <div>{line?.replaceAll("_", " ")} </div>
                            <div>
                                <b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
                            </div>
                        </div>) : <hr/>
                    })}
            </Tooltip>
        </div>) : null);
    return (
        <>
            {getTooltips()}</>
    )
}


export default SocialMediaTooltips;
