import React 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'




type FinancialBoxProps = {
    chart: ChartData
}

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

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



    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[3]

    return (
        <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'>{total.toLocaleString('el-GR')} €</span>
                </div>
            </div>


        </div>
    );
}

export default FinancialBox;