import React from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';

// components
import LatestBandiTable from './components/LatestBandiTable';
import LatestUsersActivityTable from './components/LatestUsersActivityTable';
import { Button } from 'primereact/button';

const Dashboard = () => {
    const navigate = useNavigate();

    const onGoToCreateNewBando = () => {
        navigate('/bandi/new');
    }

    const onGoToUsers = () => {
        console.log('onGoToUsers')
    }

    const onGoToStats = () => {
        console.log('onGoToStats')
    }

    const onGoToSettings = () => {
        console.log('onGoToSettings')
    }

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

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

            <div className="appPageSection statsBigBadges">
                <h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
                <div className="statsBigBadges__grid">
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Bandi Attivi', 'gepafin')}</span>
                        <span>12</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Utenti Registrati', 'gepafin')}</span>
                        <span>1250</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Domande in Pre-istruttoria', 'gepafin')}</span>
                        <span>45</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Totale Finanziamenti attivi', 'gepafin')}</span>
                        <span>€15M</span>
                    </div>
                </div>
            </div>

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

            <div className="appPageSection">
                <h2>{__('Ultimi Bandi Pubblicati', 'gepafin')}</h2>
                <LatestBandiTable/>
            </div>

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

            <div className="appPageSection">
                <h2>{__('Attività Recenti Utenti', 'gepafin')}</h2>
                <LatestUsersActivityTable/>
            </div>

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

            <div className="appPageSection">
                <h2>{__('Collegamenti rapidi', 'gepafin')}</h2>
                <div className="appPageSection__actions">
                    <Button
                        onClick={onGoToCreateNewBando}
                        label={__('Crea nuovo bando', 'gepafin')} icon="pi pi-plus" iconPos="right"/>
                    <Button
                        disabled={true}
                        onClick={onGoToUsers}
                        label={__('Gestione utenti', 'gepafin')} icon="pi pi-users" iconPos="right"/>
                    <Button
                        disabled={true}
                        onClick={onGoToStats}
                        label={__('Report mensile', 'gepafin')} icon="pi pi-chart-bar" iconPos="right"/>
                    <Button
                        disabled={true}
                        onClick={onGoToSettings}
                        label={__('Configurazione', 'gepafin')} icon="pi pi-cog" iconPos="right"/>
                </div>
            </div>
        </div>
    )
}

export default Dashboard;