import React, { useState, useEffect } from 'react';
import { t } from 'ttag';
import {
    Button,
    Table,
    TableHeader,
    TableBody,
    TableRow,
    Time,
    LearnMore,
    Pagination,
    Alert,
    Block,
    SubTitle,
    ConfirmModal,
    useModal,
    useLoading,
    usePagination
} from 'react-components';
import useApi from '../../hooks/useApi';
import { querySessions, revokeOtherSessions, revokeSession } from 'proton-shared/lib/api/auth';
import { ELEMENTS_PER_PAGE } from 'proton-shared/lib/constants';

import SessionAction from './SessionAction';
import useAuthenticationStore from '../../hooks/useAuthenticationStore';

const CLIENTS = {
    Web: t`ProtonMail for web`,
    iOS: t`ProtonMail for iOS`,
    Android: t`ProtonMail for Android`,
    ImportExport: t`ProtonMail Import-Export`,
    Bridge: t`ProtonMail Bridge`,
    WebVPN: t`ProtonVPN for web`,
    VPN: t`ProtonVPN for Windows`,
    macOSVPN: t`ProtonVPN for macOS`,
    iOSVPN: t`ProtonVPN for iOS`,
    AndroidVPN: t`ProtonVPN for Android`,
    Admin: t`Admin`
};

const SessionsSection = () => {
    const api = useApi();
    const authenticationStore = useAuthenticationStore();
    const { loading, loaded } = useLoading();
    const [table, setTable] = useState({ sessions: [], total: 0 });
    const { page, list, onNext, onPrevious, onSelect } = usePagination(table.sessions);
    const { isOpen: showConfirmRevokeAll, open: openConfirmRevokeAll, close: closeConfirmRevokeAll } = useModal();
    const currentUID = authenticationStore.getUID();
    const fetchSessions = async () => {
        const { Sessions } = await api(querySessions());
        setTable({ sessions: Sessions.reverse(), total: Sessions.length }); // Most recent, first
        loaded();
    };

    const handleRevoke = (UID) => async () => {
        await api(UID ? revokeSession(UID) : revokeOtherSessions());
        fetchSessions();
    };

    useEffect(() => {
        fetchSessions();
    }, []);

    return (
        <>
            <SubTitle>{t`Sessions`}</SubTitle>
            <Alert>{t`Unless you explicitly logout or change your password, sessions can last for up to 6 months. Sessions expire after 2 weeks of inactivity.`}</Alert>
            <Block className="flex flex-spacebetween">
                <div>
                    <Button onClick={openConfirmRevokeAll}>{t`Revoke all other sessions`}</Button>
                    <ConfirmModal show={showConfirmRevokeAll} onClose={closeConfirmRevokeAll} onConfirm={handleRevoke}>
                        <Alert>{t`Do you want to revoke all other sessions than the current one?`}</Alert>
                    </ConfirmModal>
                    <LearnMore url="https://protonmail.com/support/knowledge-base/log-out-all-other-sessions/" />
                </div>
                <Pagination
                    page={page}
                    total={table.total}
                    limit={ELEMENTS_PER_PAGE}
                    onNext={onNext}
                    onPrevious={onPrevious}
                    onSelect={onSelect}
                />
            </Block>
            <Table>
                <TableHeader cells={[t`Service`, t`Time`, t`Action`]} />
                <TableBody loading={loading} colSpan={3}>
                    {list.map((session) => {
                        const key = session.UID;
                        return (
                            <TableRow
                                key={key}
                                cells={[
                                    CLIENTS[session.ClientID],
                                    <Time format="LLL" key={key}>
                                        {session.CreateTime}
                                    </Time>,
                                    <SessionAction
                                        key={key}
                                        session={session}
                                        currentUID={currentUID}
                                        onRevoke={handleRevoke(session.UID)}
                                    />
                                ]}
                            />
                        );
                    })}
                </TableBody>
            </Table>
        </>
    );
};

export default SessionsSection;

@@ -54,17 +54,17 @@
 mport %7B 
-t
+c
  %7D from 
@@ -668,16 +668,27 @@
    Web: 
+c('Badge').
 t%60Proton
@@ -711,16 +711,27 @@
    iOS: 
+c('Badge').
 t%60Proton
@@ -758,16 +758,27 @@
 ndroid: 
+c('Badge').
 t%60Proton
@@ -814,16 +814,27 @@
 Export: 
+c('Badge').
 t%60Proton
@@ -866,16 +866,27 @@
 Bridge: 
+c('Badge').
 t%60Proton
@@ -907,24 +907,35 @@
     WebVPN: 
+c('Badge').
 t%60ProtonVPN 
@@ -949,24 +949,35 @@
 %60,%0A    VPN: 
+c('Badge').
 t%60ProtonVPN 
@@ -1000,24 +1000,35 @@
   macOSVPN: 
+c('Badge').
 t%60ProtonVPN 
@@ -1047,24 +1047,35 @@
     iOSVPN: 
+c('Badge').
 t%60ProtonVPN 
@@ -1100,16 +1100,27 @@
 oidVPN: 
+c('Badge').
 t%60Proton
@@ -1148,16 +1148,27 @@
  Admin: 
+c('Badge').
 t%60Admin%60
@@ -2136,16 +2136,27 @@
 bTitle%3E%7B
+c('Title').
 t%60Sessio
@@ -2191,16 +2191,43 @@
 %3CAlert%3E%7B
+c('Info')%0A                .
 t%60Unless
@@ -2504,16 +2504,28 @@
 keAll%7D%3E%7B
+c('Action').
 t%60Revoke
@@ -2707,16 +2707,26 @@
 %3CAlert%3E%7B
+c('Info').
 t%60Do you
@@ -3328,16 +3328,27 @@
 cells=%7B%5B
+c('Title').
 t%60Servic
@@ -3355,17 +3355,39 @@
 e%60, 
-t%60Time%60, 
+c('Title').t%60Time%60, c('Title').
 t%60Ac

Add context for translations