/** ******************************************************************************
 * Copyright (c) 2025 Precies. Software OU and others
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 * ****************************************************************************** */

import { FunctionComponent, ReactNode, useState } from 'react';
import { Button, Dialog, DialogContent, DialogTitle, Stack } from '@mui/material';

export const LoginComponent: FunctionComponent<LoginComponentProps> = props => {
    const [dialogOpen, setDialogOpen] = useState(false);

    const showLoginDialog = () => setDialogOpen(true);

    const providers = Object.keys(props.loginProviders);
    if (providers.length === 1) {
        return props.renderButton(props.loginProviders[providers[0]]);
    } else {
        return (
            <>
                {props.renderButton(undefined, showLoginDialog)}
                <Dialog fullWidth open={dialogOpen} onClose={() => setDialogOpen(false)}>
                    <DialogTitle>Log In</DialogTitle>
                    <DialogContent>
                        <Stack spacing={2}>
                            {providers.map(provider => (
                                <Button
                                    key={provider}
                                    fullWidth
                                    variant='contained'
                                    color='secondary'
                                    href={props.loginProviders[provider]}>
                                    {provider}
                                </Button>
                            ))}
                        </Stack>
                    </DialogContent>
                </Dialog>
            </>
        );
    }
};

export interface LoginComponentProps {
    loginProviders: Record<string, string>;
    renderButton: (href?: string, onClick?: () => void) => ReactNode;
}
