import React, { useEffect, useState, useCallback } from 'react';
import { __ } from '@wordpress/i18n';
import { head, isEmpty, pathOr } from 'ramda';
import NumberFlow from '@number-flow/react';

// store
import { useStoreValue } from '../../store';

// components
import DashboardService from '../../service/dashboard-service';
import ChartDomandePerStato from '../../components/ChartDomandePerStato';
import ChartRichiesteVsApprovate from '../../components/ChartRichiesteVsApprovate';
import BeneficiarioUltimeDomandeTable from './components/BeneficiarioUltimeDomandeTable';

const StatsBeneficiary = () => {
    const [mainStats, setMainStats] = useState({});
    const [chartStats, setChartStats] = useState({});
    const chosenCompanyId = useStoreValue('chosenCompanyId');
    const companies = useStoreValue('companies');

    const getStats = (resp) => {
        if (resp.status === 'SUCCESS') {
            setMainStats(resp.data.applicationWidget);
            setChartStats(resp.data.applicationWidgetBars);
        }
    }

    const errGetStats = () => {}

    const getStatValue = useCallback((key, fallback = '') => {
        return pathOr(fallback, [key], mainStats);
    }, [mainStats]);

    useEffect(() => {
        const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));

        if (existingCompany) {
            DashboardService.getBeneficiaryStatsPage(chosenCompanyId, getStats, errGetStats);
        }
    }, [chosenCompanyId, companies]);

    return(
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Statistiche', 'gepafin')}</h1>
            </div>

            <div className="appPage__spacer"></div>

            <div className="appPageSection statsBigBadges">
                <h2>{__('Riepilogo', 'gepafin')}</h2>
                <div className="statsBigBadges__grid doubleStatsItems">
                    <div className="statsBigBadges__gridItemDoubleStatsBeneficiary">
                        <span>{__('Domande presentate', 'gepafin')}</span>
                        <span><NumberFlow
                            value={getStatValue('submittedApplication', 0)}
                            format={{ notation: 'compact' }}
                            locales="it-IT"/></span>
                    </div>
                    <div className="statsBigBadges__gridItemDoubleStatsBeneficiary">
                        <span>{__('Tasso di successo', 'gepafin')}</span>
                        <span><NumberFlow
                            value={getStatValue('waitingForResponseAmendments', 0)}
                            format={{ notation: 'compact' }}
                            suffix={` ${__('%', 'gepafin')}`}
                            locales="it-IT"/></span>
                    </div>
                    <div className="statsBigBadges__gridItemDoubleStatsBeneficiary">
                        <span>{__('Domande approvate', 'gepafin')}</span>
                        <span><NumberFlow
                            value={getStatValue('approvedApplication', 0)}
                            format={{ notation: 'compact' }}
                            locales="it-IT"/></span>
                    </div>
                    <div className="statsBigBadges__gridItemDoubleStatsBeneficiary">
                        <span>{__('Importo totale finanziato', 'gepafin')}</span>
                        <span><NumberFlow
                            value={getStatValue('averageResponseDays', 0)}
                            format={{
                                notation: 'compact',
                                compactDisplay: 'short',
                                roundingMode: 'trunc',
                                style: 'currency',
                                currency: 'EUR',
                                currencyDisplay: 'symbol'
                            }}
                            locales="it-IT"/></span>
                    </div>
                </div>
            </div>

            <div className="appPage__spacer"></div>

            {chartStats && !isEmpty(chartStats)
                ? <div className="appPageSection">
                    <h2>{__('Statistiche di sistema', 'gepafin')}</h2>
                    <div className="appPageSection columns">
                        <ChartRichiesteVsApprovate
                            title={__('Importi Richiesti VS Approvati', 'gepafin')}
                            data={chartStats.requestedVsApprovedAmount}/>
                        <ChartDomandePerStato
                            title={__('Domande per stato', 'gepafin')}
                            data={chartStats.applicationPerStatus}/>
                    </div>
                </div> : null}

            <div className="appPage__spacer"></div>

            <div className="appPageSection">
                <h2>{__('Ultime richieste di finanziamento', 'gepafin')}</h2>
                <BeneficiarioUltimeDomandeTable/>
            </div>
        </div>
    )
}

export default StatsBeneficiary;