import { Box, CssBaseline, IconButton, Link, ThemeProvider, Typography } from "@mui/material";
import theme from "../utils/themes/light";
import Button from "../components/Button";
import InputTextfield from "../components/InputTextfield";
import PenaLogo from "../components/PenaLogo";
import CloseIcon from "@mui/icons-material/Close";
import { useState } from "react";


// TODO wrap links with react-router
export default function Signup() {
    const [email, setEmail] = useState<string>("");
    const [phonenumber, setPhonenumber] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [repeatPassword, setRepeatPassword] = useState<string>("");

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "center",
                }}
            >
                <Box
                    sx={{
                        position: "relative",
                        width: "600px",
                        mt: "80px",
                        backgroundColor: "white",
                        display: "flex",
                        alignItems: "center",
                        flexDirection: "column",
                        p: "50px",
                        pb: "40px",
                        gap: "15px",
                        borderRadius: "12px",
                        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
                    }}
                >
                    <IconButton
                        sx={{
                            position: "absolute",
                            right: "15px",
                            top: "15px",
                            p: 0,
                        }}>
                        <CloseIcon sx={{ transform: "scale(1.5)" }} />
                    </IconButton>
                    <PenaLogo width={233} theme="light" />
                    <Typography sx={{ color: "#4D4D4D", mt: "5px", mb: "35px" }}>Регистрация</Typography>
                    <InputTextfield
                        value={email}
                        onChange={e => setEmail(e.target.value)}
                        bold
                        id="email"
                        label="E-mail"
                        placeholder="username@penahub.com"
                        gap="15px"
                    />
                    <InputTextfield
                        value={phonenumber}
                        onChange={e => setPhonenumber(e.target.value)}
                        bold
                        id="phonenumber"
                        label="Телефон"
                        placeholder="+7 900 000 00 00"
                        gap="15px"
                    />
                    <InputTextfield
                        value={password}
                        onChange={e => setPassword(e.target.value)}
                        bold
                        id="password"
                        label="Пароль"
                        placeholder="Не менее 8 символов"
                        gap="15px"
                    />
                    <InputTextfield
                        value={repeatPassword}
                        onChange={e => setRepeatPassword(e.target.value)}
                        bold
                        id="repeat-password"
                        label="Повторить пароль"
                        placeholder="Не менее 8 символов"
                        gap="15px"
                    />
                    <Button
                        fullWidth
                        variant="contained"
                        sx={{
                            backgroundColor: theme.palette.custom.brightPurple.main,
                            textColor: "white",
                        }}
                        py="12px"
                    >Войти</Button>
                    <Link href="#" sx={{ color: theme.palette.custom.brightPurple.main }}>Вход в личный кабинет</Link>
                </Box>
            </Box>
        </ThemeProvider>
    );
}