import { Box, Button, CssBaseline, Grid, Link, Paper, TextField, ThemeProvider, Typography, Alert, Collapse } from "@mui/material"
import { useNavigate } from "react-router-dom"
import { api, theme } from '../index'
import axios from "axios"
import { useRef, useState } from "react"
import "./custom.css"

export const PageLogin = () => {
    const navigate = useNavigate()
    const usernameInput = useRef<HTMLInputElement>(null)
    const passwordInput = useRef<HTMLInputElement>(null)
    const [illegal, setIllegal] = useState(false)

    const handleLogin = () => {
        const username = usernameInput.current?.value
        const password = passwordInput.current?.value
        if(!username || !password) {
            return setIllegal(true)
        }

        axios.post(api("/api/login"), {
            username,
            password,
            createToken: false
        }).then((response) => {
            window.sessionStorage.setItem('identifier', response.data.identifier)
            window.sessionStorage.setItem('textures', response.data.texturs)
            window.sessionStorage.setItem('username', response.data.username)
            window.sessionStorage.setItem('uuid', response.data.uuid)
        })
        
    }
    
    return <ThemeProvider theme={theme}>
        <CssBaseline />

        <div className="rootPanel">  

            <Box>
                <Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
                    <Paper elevation={3} className="inlineBox">
                        <Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
                            <Grid item className="title">
                                <Typography variant="h5">
                                    登录到世界树
                                </Typography>
                            </Grid>

                            <Grid item>
                                <Collapse in={illegal}>
                                    <Alert severity="error">
                                        无效的用户名或密码
                                    </Alert>
                                </Collapse>
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
                            </Grid>

                            <Grid item>
                                <Button onClick={handleLogin} variant="contained" color="primary" > 
                                    登录
                                </Button>
                            </Grid>

                            <Grid item>
                                <Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Box>
        </div>
    </ThemeProvider>
}