import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 *
 * Datalayer License
 */
import { useState } from 'react';
import { Button, FormControl, TextInput } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useIAM, useNavigate, useToast } from '../../hooks/index.js';
import { useIAMStore } from '../../state/index.js';
/**
 * Component for token-based authentication
 * Provides a simple button that expands to show a token input form
 */
export const LoginToken = (props) => {
    const { homeRoute, style } = props;
    const [showForm, setShowForm] = useState(false);
    const [token, setToken] = useState('');
    const [loading, setLoading] = useState(false);
    const { loginAndNavigate } = useIAM();
    const { logout, checkIAMToken } = useIAMStore();
    const { enqueueToast } = useToast();
    const navigate = useNavigate();
    const handleLogin = async () => {
        if (!token.trim()) {
            enqueueToast('Please enter a valid token', { variant: 'warning' });
            return;
        }
        setLoading(true);
        try {
            await loginAndNavigate(token, logout, checkIAMToken, navigate, homeRoute);
            setShowForm(false);
            setToken('');
        }
        catch (error) {
            console.error('Token login failed:', error);
            enqueueToast('Failed to authenticate with provided token', {
                variant: 'error',
            });
        }
        finally {
            setLoading(false);
        }
    };
    if (!showForm) {
        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, children: "Login with Token" }));
    }
    return (_jsxs(Box, { style: style, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your Authentication Token" }), _jsx(TextInput, { block: true, placeholder: "Paste your authentication token here", value: token, onChange: e => setToken(e.target.value), onKeyDown: e => {
                            if (e.key === 'Enter') {
                                handleLogin();
                            }
                            else if (e.key === 'Escape') {
                                setShowForm(false);
                                setToken('');
                            }
                        } }), _jsx(FormControl.Caption, { children: "Enter your Datalayer authentication token to log in" })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-start", children: [_jsx(Button, { variant: "primary", onClick: handleLogin, disabled: loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", onClick: () => {
                            setShowForm(false);
                            setToken('');
                        }, children: "Cancel" })] })] }));
};
export default LoginToken;
