import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { isEmpty, isNil, pathOr } from 'ramda';
import { klona } from 'klona';

// store
import { storeSet, storeGet } from '../../store';

// service
import UserService from '../../service/user-service';

// tools
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import { isEmail } from '../../helpers/validators';

// components
import AllUsersTable from './components/AllUsersTable';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';
import { Dialog } from 'primereact/dialog';
import { classNames } from 'primereact/utils';
import { Toast } from 'primereact/toast';
import getDateFromISOstring from '../../helpers/getDateFromISOstring';
import getBandoLabel from '../../helpers/getBandoLabel';
import { useNavigate, useParams } from 'react-router-dom';
import NumberFlow from '@number-flow/react';

const UserActivity = () => {
    const [loading, setLoading] = useState(false);
    const toast = useRef(null);
    const navigate = useNavigate();
    const { id } = useParams();
    const [user, setUser] = useState({});
    const [roles, setRoles] = useState([]);

    const goBack = () => {
        navigate(`/utenti`);
    }

    const getUserCallback = (resp) => {
        if (resp.status === 'SUCCESS') {
            setUser(resp.data)
        }
        setLoading(false);
    }

    const errGetUserCallback = (resp) => {
        set404FromErrorResponse(resp);
        setLoading(false);
    }

    const getRolesCallback = (resp) => {
        if (resp.status === 'SUCCESS') {
            setRoles(resp.data)
        }
        setLoading(false);
    }

    const errGetRolesCallback = (resp) => {
        set404FromErrorResponse(resp);
        setLoading(false);
    }

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

    useEffect(() => {
        if (id && !isEmpty(id)) {
            setLoading(true);
            UserService.getUser(id, getUserCallback, errGetUserCallback);
            UserService.getRoles(getRolesCallback, errGetRolesCallback);
        }
    }, [id])

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Controllo attività utenti', 'gepafin')}</h1>
            </div>

            <div className="appPage__spacer"></div>
            <Toast ref={toast}/>

            <div className="appPageSection">
                <div className="appPageSection__actions">
                    <Button
                        onClick={goBack}
                        outlined
                        label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
                </div>
            </div>

            <div className="appPageSection__withBorder columns">
                <p className="appPageSection__pMeta">
                    <span>{__('Nome utente', 'gepafin')}</span>
                    <span>{`${user.firstName} ${user.lastName}`}</span>
                </p>
                <p className="appPageSection__pMeta">
                    <span>{__('Email', 'gepafin')}</span>
                    <span>{user.email}</span>
                </p>
                <p className="appPageSection__pMeta">
                    <span>{__('Ruolo', 'gepafin')}</span>
                    <span>{user.role?.roleName}</span>
                </p>
                <p className="appPageSection__pMeta">
                    <span>{__('Data registrazione', 'gepafin')}</span>
                    <span>{getDateFromISOstring(user.createdDate)}</span>
                </p>
                <p className="appPageSection__pMeta">
                    <span>{__('Ultimo accesso', 'gepafin')}</span>
                    <span>{getDateFromISOstring(user.lastLogin)}</span>
                </p>
                <p className="appPageSection__pMeta">
                    <span>{__('Stato account', 'gepafin')}</span>
                    <span>{user.status}</span>
                </p>
            </div>

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

            <div className="appPageSection">
                <h2>{__('Statistiche attività', 'gepafin')}</h2>
                <div className="statsBigBadges__grid grid-small">
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Login totali', 'gepafin')}</span>
                        <span>{<NumberFlow
                            value={getStatValue('numberOfActiveCalls', 0)}
                            format={{ notation: 'compact' }}
                            locales="it-IT"/>}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Bandi gestiti', 'gepafin')}</span>
                        <span>{<NumberFlow
                            value={getStatValue('numberOfActiveCalls', 0)}
                            format={{ notation: 'compact' }}
                            locales="it-IT"/>}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Domande processate', 'gepafin')}</span>
                        <span>{<NumberFlow
                            value={getStatValue('numberOfActiveCalls', 0)}
                            format={{ notation: 'compact' }}
                            locales="it-IT"/>}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default UserActivity;