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 => {
            if (smi.found) {
                return (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name}>
                    <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 => {
                                return line ? (<div
                                    className={`tooltip__data tooltip__data--${line}`}
                                    key={line + name}>
                                    <div>{line?.replaceAll("_", " ")} </div>
                                    <div>
                                        <b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
                                    </div>
                                </div>) : <hr/>
                            })}
                    </Tooltip>
                </div>);
            }
        });
    return (
        <>
            {getTooltips()}</>
    )
}


export default SocialMediaTooltips;