import { i18n } from 'arm-common';
import agui from 'arm-gui';
import React, { useCallback } from 'react';
import { connect } from 'react-redux';


const getI18n = (code, desc, ...args) => i18n(`ADV.SESSION_EXPIRED.${code}`, desc, ...args)

export default function SessionExpired(props) {
    const { sessionExpired } = props;
    
    const reload = useCallback(() => {
        location.reload();
    }, [history])

    return (
        <agui.PopupDialog
            show={sessionExpired}
            addBackDrop
            onClose={reload}
        >
            <agui.PopupDialog.Header>
                {getI18n('EXPIRED_SESSION', 'Sessione scaduta')}
            </agui.PopupDialog.Header>

            <agui.PopupDialog.Body>
                <p>
                    {getI18n('USER_DISCONNECTED', 'Utente disconnesso.')}
                    <br />
                    {getI18n('EXPIRED_SESSION_MESSAGE', 'Per riconnettersi premere il tasto "Ricarica" oppure ricaricare la pagina.')}
                </p>
            </agui.PopupDialog.Body>

            <agui.PopupDialog.Footer>
                <div style={{ marginLeft: 'auto' }}/>

                <agui.aButton
                    bs='primary'
                    onClick={reload}
                >
                    {getI18n('RELOAD', 'Ricarica')}
                </agui.aButton>
            </agui.PopupDialog.Footer>
        </agui.PopupDialog>
    );
}

const mapStateToProps = (state) => ({
    sessionExpired: state.account.sessionExpired
})

SessionExpired = connect(mapStateToProps)(SessionExpired);