import { Filters } from '../../../commons/entities/filters.entity';
import { usePersonaSummaryHook } from './persona-summary.hook';
import { useEffect } from 'react';
import './persona-summary.component.scss';
import StarOutlineIcon from '@mui/icons-material/StarOutline';
import MonitorIcon from '@mui/icons-material/Monitor';
import LanguageIcon from '@mui/icons-material/Language';
import { formatNumber, formatPercentage } from '../../../commons/utils/formatter.util';

const PersonaSummaryComponent = (props: any) => {
    const { personaSummary, handler } = usePersonaSummaryHook();
    useEffect(() => {
        handler.getPersonaSummaryFor(props.filters);
    }, [props.filters]);

    return (
        personaSummary &&
        personaSummary.scoreItems.length >= 3 && (
            <div className={'persona-detail-summary-wrapper'}>
                <div className={'ai-pd-summary-name-stat'}>
                    <div className={'ai-pd-summary-name-stat-name'}>{personaSummary.name}</div>
                    <div className={'ai-pd-summary-name-stat-stat'}>
                        {formatNumber(personaSummary.totalPersonaUsers)} users (
                        {formatPercentage(personaSummary.totalPersonaUsers / personaSummary.totalUsers)} of total)
                    </div>
                </div>
                <div className={'ai-pd-summary-score-block ai-pd-summary-score-block-bg1'}>
                    <div className={'ai-pd-summary-score'}>{personaSummary.scoreItems[0].score}</div>
                    <div className={'ai-pd-summary-type'}>
                        <StarOutlineIcon sx={{ fontSize: 16 }}></StarOutlineIcon>
                        {personaSummary.scoreItems[0].type}
                    </div>
                </div>
                <div className={'ai-pd-summary-score-block ai-pd-summary-score-block-bg2'}>
                    <div className={'ai-pd-summary-score'}>{personaSummary.scoreItems[1].score}</div>
                    <div className={'ai-pd-summary-type'}>
                        <MonitorIcon sx={{ fontSize: 16 }}></MonitorIcon>
                        {personaSummary.scoreItems[1].type}
                    </div>
                </div>
                <div className={'ai-pd-summary-score-block ai-pd-summary-score-block-bg3'}>
                    <div className={'ai-pd-summary-score'}>{personaSummary.scoreItems[2].score}</div>
                    <div className={'ai-pd-summary-type'}>
                        <LanguageIcon sx={{ fontSize: 16 }}></LanguageIcon>
                        {personaSummary.scoreItems[2].type}
                    </div>
                </div>
            </div>
        )
    );
};

export default PersonaSummaryComponent;