import React from 'react';
import { Link } from "react-router-dom";
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Logo from "../../img/logo.png";
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import { Redirect } from "react-router-dom";

const url = "/simcompanies/API/user/create"

const useStyles = makeStyles(theme => ({
    card: {
        backgroundColor: "#0B1929",
        display: "flex"
    },
    logo: {
        maxWidth: "50%",
        height: "auto"
    },
    input: {
        color: "#9daac1"
    },
    grid: {
        display: "flex"
    }
}));

const CssTextField = withStyles({
    root: {
        '& label.Mui-focused': {
            color: 'white',
        },
        '&:hover label': {
            color: '#FFC800',
        },
        '& label': {
            color: 'white',
        },
        '& .MuiOutlinedInput-root': {
            '& input': {
                color: "white"
            },
            '& fieldset': {
                borderColor: 'white',
                color: "white"
            },
            '&:hover fieldset': {
                borderColor: "#FFC800",
            },
            '&.Mui-focused fieldset': {
                borderColor: 'white',
            },
        },
    },
})(TextField);



export default function CreateAccount() {
    const classes = useStyles();
    const [username, setUsername] = React.useState("");
    const [password, setPassword] = React.useState("");
    const [login, setLogin] = React.useState(true);


    const putCreateAccount = async (url, data) => {
        const response = await fetch(url, {
            method: 'PUT',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
                'Content-Type': 'application/json'
            },
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: JSON.stringify(data)
        });

        if (response.status == "200") {
            setLogin(false)
        }
    }
    const handleClick = (e) => {

        if (username !== "" && password !== "") {
            putCreateAccount(url, { email: username, password: password })

            setUsername("")
            setPassword("")
        }
    }
    const handleChangeUSR = (e) => {
        setUsername(e.target.value)
    }
    const handleChangePW = (e) => {
        setPassword(e.target.value)
    }

    return (
        login === true ?
            <Box className="loginBackground" display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                <Card className={classes.card} raised>
                    <CardContent>
                        <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                            <img src={Logo} alt="SC Dashboard Logo" className={classes.logo} />
                        </Box >
                        <form>
                            <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                                <Grid container spacing={2} >
                                    <Grid item xs={12} >
                                        <Box display="flex" justifyContent="center"  >
                                            <Typography variant="h4" color="secondary">
                                                Create new Account
                                        </Typography>
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12} >
                                        <Box display="flex" justifyContent="center"  >
                                            <CssTextField
                                                id="usernameInput"
                                                label="Username"
                                                variant="outlined"
                                                onChange={handleChangeUSR}
                                                value={username}
                                                className={classes.input}
                                            />
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Box display="flex" justifyContent="center"  >
                                            <CssTextField
                                                id="passwordInput"
                                                type="password"
                                                label="Password"
                                                autoComplete="current-password"
                                                variant="outlined"
                                                value={password}
                                                onChange={handleChangePW}
                                                className={classes.input}
                                            />
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Box display="flex" justifyContent="center"  >
                                            <Button variant="contained" color="secondary" onClick={handleClick}>
                                                Create Account
                                    </Button>
                                        </Box >
                                    </Grid>
                                </Grid>
                            </Box >
                        </form>
                    </CardContent>
                </Card>
            </Box > : <Redirect to={"/login"} />
    )

}