import { Button, Grow, Slide, Stack, Typography, useMediaQuery } from '@mui/material'
import React, { SetStateAction } from 'react'
import Iconify from '../Iconify'
import UltimaLogo from '../../assets/icons/UltimaLogoNew.png';
import Grid from '@mui/material/Grid2';
import { providers } from '@/data/providers';

const ProviderButton = ({ icon, name }: any) => (
    <Button
        variant="contained"
        color="inherit"
        sx={{
            p: 1.5,
            width: 1,
            display: 'flex',
            flexDirection: 'column',
        }}>
        <Iconify icon={icon} size={24} />
        <Typography component="span" sx={{ fontSize: 12, mt: 0.5 }}>Continue with</Typography>
        {name}
    </Button>
)

const AuthorizeApp = ({
    page,
    handleChangePage
}: {
    page: 'signin' | 'signup' | 'providers';
    handleChangePage: (page: 'signin' | 'signup' | 'providers') => void;
}) => {
    const isSmall = useMediaQuery('(max-height: 700px)');

    return (
        <Grow in={page == 'providers'} mountOnEnter unmountOnExit style={{
            position: page === 'providers' ? 'static' : 'absolute'
        }}>
            <Stack direction='column' sx={{
                gap: 2,
                maxWidth: 500,
                width: 1,
                m: 10,
                userSelect: 'none'
            }}>
                {!isSmall && (
                    <img src={UltimaLogo} alt="Ultima" draggable={false} style={{
                        width: 100,
                        height: 100,
                        userSelect: 'none'
                    }} />
                )}
                <Typography sx={{
                    fontWeight: 550,
                    fontSize: 18,
                    color: 'white',
                    textTransform: 'uppercase'
                }}>
                    Continue with an app
                </Typography>
                <Typography variant="h2" sx={{
                    fontWeight: 550,
                }}>
                    Authorize With Provider<Typography component="span" variant="h2" sx={{ color: 'primary.light', fontWeight: 600, textShadow: (theme) => `0 0 12px ${theme.palette.primary.light}` }}>.</Typography>
                </Typography>
                <Grid container spacing={2} width={1}>
                    {providers.map((p) => (
                        <Grid key={p.name} size="grow">
                            <ProviderButton icon={p.icon} name={p.name} />
                        </Grid>
                    ))}
                </Grid>
                <Button
                    onClick={() => handleChangePage('signin')}
                    variant="text"
                    color="info"
                    sx={{
                        width: 'fit-content'
                    }}
                    disableRipple
                >
                    Sign in with Password
                </Button>
            </Stack>
        </Grow>
    )
}

export default AuthorizeApp