import { Box, Button, CssBaseline, Grid, 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 PageRegister = () => {
    const navigate = useNavigate()
    const [illegal1, setIllegal1] = useState(false)
    const [illegal2, setIllegal2] = useState(false)
    const [illegal3, setIllegal3] = useState(false)

    //TODO

    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 container spacing={2}>
                                <Grid item><Collapse in={illegal1}>
                                    <Alert severity="error">
                                        无效的用户名、密码或邮箱
                                    </Alert>
                                </Collapse></Grid>
                                
                                <Grid item><Collapse in={illegal2}>
                                    <Alert severity="error">
                                        无效的邀请码
                                    </Alert>
                                </Collapse></Grid>
                                
                                <Grid item><Collapse in={illegal3}>
                                    <Alert severity="error">
                                        无效的邀请码
                                    </Alert>
                                </Collapse></Grid>
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="用户名" type="text" /* inputRef={usernameInput} */ onInput={() => setIllegal1(false)} />
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="密码" type="password" /* inputRef={passwordInput} */ onInput={() => setIllegal1(false)} />
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="邮箱" type="text" /* inputRef={emailInput} */ onInput={() => setIllegal1(false)} />
                            </Grid>

                            <Grid item>
                                <TextField fullWidth required label="校验码" type="text" /* inputRef={validationCodeInput} */ onInput={() => setIllegal2(false)} />
                            </Grid>

                            <Grid item>
                                <TextField fullWidth label="邀请码" type="text" /* inputRef={invitationCodeInput} */ onInput={() => setIllegal3(false)} />
                            </Grid>

                            <Grid item>
                                <Button /* onClick={handleRegister} */ variant="contained" color="primary" >
                                    注册
                                </Button>
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Box>
        </div>
    </ThemeProvider>
}