import React, {useContext} from 'react';
import {ChartData} from "../../../../models/Riview/ChartData";
import {arraySum, getRate} from "../../../../helpers/functions";
import './fianncialbox.scss'
import RateBox from "../../../ApexCharts/RateBox";
import vault from '../../../../assets/images/vault.svg'
import euro from '../../../../assets/images/euro.svg'
import HeaderControlsContext from "../../../../context/headerControls-context";


type FinancialBoxProps = {
    chart: ChartData
}

const IconMap = {
    'governmental-funds-total': vault,
    'competitive-grants-total': euro
}

const FinancialBox = ({chart}: FinancialBoxProps) => {

    const lastIndex = chart.labels.length - 1;
    const key = chart.keyId
    // @ts-ignore
    const icon = IconMap[key]
    const data = chart.series[0].data
    const total = arraySum(data)
    const rate = getRate(data)
    const from = chart.labels[0];
    const to = chart.labels[lastIndex];
    const {showSensitive} = useContext(HeaderControlsContext)
    return (<>
            {total !==-1 &&
                <div className='financial-box'>
                    <RateBox rate={rate}/>
                    <div className="info">
                        <div className="info-left">
                            <div className='year'>
                                <img src={icon} alt=""/>
                                <span> {from}-{to}</span>
                            </div>
                            <div className='name'>{chart.series[0].name}</div>
                        </div>
                        <div className="info-right">
                    <span className='value'>
                        {showSensitive ? total.toLocaleString('el-GR') : '*********'}€</span>
                        </div>
                    </div>


                </div>}</>
    );
}

export default FinancialBox;