import React, { useCallback, useEffect, useState } from 'react';
import { useAuthClient, useSessionExpired } from '@theorchard/suite-auth';
import { Modal } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-i18n';
import type { SessionExpirationConfiguration } from '../../types';

export interface Props {
    children: React.ReactNode;
    config?: SessionExpirationConfiguration;
}

export const SessionExpirationModal: React.FC<Props> = ({ children, config }) => {
    const client = useAuthClient();
    const isExpired = useSessionExpired();
    const [isRetrying, setIsRetrying] = useState(false);

    const content =
        isExpired && config?.SessionExpiredBackdrop ? <config.SessionExpiredBackdrop /> : children;

    const handleRetry = useCallback(async () => {
        setIsRetrying(true);
        await client.retrySession();
        setIsRetrying(false);
    }, [client]);

    useEffect(() => {
        if (!isExpired) return;

        const controller = new AbortController();

        window.addEventListener(
            'storage',
            () => {
                void handleRetry();
            },
            { signal: controller.signal }
        );

        return () => controller.abort();
    }, [isExpired, handleRetry]);

    return (
        <>
            {isExpired && (
                <Modal.Custom
                    isOpen={isExpired}
                    className="SessionExpired"
                    overlayClassName="SessionExpiredOverlay"
                    onRequestClose={() => false}
                    customHeader={
                        <header className="ModalHeader ReactModal-header">
                            <h3 className="ReactModal-header-text">
                                {formatMessage('session_logged_out')}
                            </h3>
                        </header>
                    }
                    cancelButtonProps={{
                        onClick: () => void handleRetry(),
                        loading: isRetrying,
                        title: formatMessage('session_retry'),
                        variant: 'secondary',
                    }}
                    confirmButtonProps={{
                        onClick: () => window.location.reload(),
                        title: formatMessage('session_log_back_in'),
                    }}
                >
                    <p style={{ width: '390px' }}>{formatMessage('session_expired_message')}</p>
                </Modal.Custom>
            )}
            {content}
        </>
    );
};