import { Box, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import InputTextfield from "../components/InputTextfield";
import PenaLogo from "../components/PenaLogo";
import CloseIcon from "@mui/icons-material/Close";
import { useState } from "react";


export default function Signup() {
    const [email, setEmail] = useState<string>("");
    const [phonenumber, setPhonenumber] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [repeatPassword, setRepeatPassword] = useState<string>("");
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "100vh",
            }}
        >
            <Box
                sx={{
                    position: "relative",
                    width: upMd ? "600px" : "100%",
                    height: upMd ? "auto" : "100%",
                    backgroundColor: "white",
                    display: "flex",
                    alignItems: "center",
                    flexDirection: "column",
                    p: upMd ? "50px" : "18px",
                    pb: upMd ? "40px" : "30px",
                    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>
                <Box sx={{ mt: "65px" }}>
                    <PenaLogo width={upMd ? 233 : 196} />
                </Box>
                <Typography
                    sx={{
                        color: theme.palette.grey3.main,
                        mt: "5px",
                        mb: upMd ? "35px" : "33px",
                    }}
                >Регистрация</Typography>
                <InputTextfield
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    id="email"
                    label="E-mail"
                    placeholder="username@penahub.com"
                    gap={upMd ? "15px" : "10px"}
                />
                <InputTextfield
                    value={phonenumber}
                    onChange={e => setPhonenumber(e.target.value)}
                    id="phonenumber"
                    label="Телефон"
                    placeholder="+7 900 000 00 00"
                    gap={upMd ? "15px" : "10px"}
                />
                <InputTextfield
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    id="password"
                    label="Пароль"
                    placeholder="Не менее 8 символов"
                    gap={upMd ? "15px" : "10px"}
                />
                <InputTextfield
                    value={repeatPassword}
                    onChange={e => setRepeatPassword(e.target.value)}
                    id="repeat-password"
                    label="Повторить пароль"
                    placeholder="Не менее 8 символов"
                    gap={upMd ? "15px" : "10px"}
                />
                <CustomButton
                    fullWidth
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                        textColor: "white",
                        width: "100%",
                        mt: upMd ? undefined : "10px",
                    }}
                    py="12px"
                >Войти</CustomButton>
                <Link
                    href="#"
                    sx={{
                        color: theme.palette.brightPurple.main,
                        mt: "auto",
                    }}
                >Вход в личный кабинет</Link>
            </Box>
        </Box>
    );
}