import * as React from "react";
import {Fragment} from "react";
import {createApiRequestStore} from "../api/ApiRequestStore";
import {Button, createStyles, Theme, WithStyles, WithTheme} from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField/TextField";
import withStyles from "@material-ui/core/styles/withStyles";
import Typography from "@material-ui/core/Typography";
import ErrorDialog from "../common/errorHandling/ErrorDialog";
import {ErrorDialogData} from "../common/errorHandling/ErrorMapper";
import {createErrorStore} from "../common/errorHandling/ErrorStore";


const styles = (theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1,
            display: 'flex'
        },
        leftPane: {
            backgroundColor: theme.palette.primary.main,
            height: '100vh',
            minWidth: '240px'
        },
        rightPane: {
            height: '100vh',
            display: "flex",
            flexDirection: "column",
            justifyContent: "center"
        },
        button: {
            margin: "auto",
            width: "100%"
        },
        loginForm: {
            margin: "auto",
            width: "100%",
            position: "absolute"
        }
    });


type LoginProps = {
    onLogin: () => void,
    handleErrorDialogOpen: (dialogData: ErrorDialogData) => void
    handleErrorDialogClose: () => void
} & WithStyles<typeof styles> & WithTheme

type State = {
    username: string,
    password: string,
    errorDialogOpen: boolean,
}


class Login extends React.Component<LoginProps, State> {
    errorStore = createErrorStore();

    readonly state: State = {
        username: "",
        password: "",
        errorDialogOpen: false,
    };


    handleSubmit = () => {
        const requestStore = createApiRequestStore();
        requestStore.login({
            username: this.state.username,
            password: this.state.password
        }).then(response => {
            if (response) {
                localStorage.setItem("accessToken", response.accessToken)
            }
            this.props.onLogin();
        })
            .catch(error => {
                const dialogData = this.errorStore.mapErrorResponseToErrorDialogData(error);
                this.props.handleErrorDialogOpen({content: "Wrong username or password"});
            })
    };

    private handleDialogChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
        this.setState({
            ...this.state,
            [event.currentTarget.name]: event.currentTarget.value
        });
    };


    render() {
        return (
            <Fragment>
                <Grid container spacing={0} direction={"row"}>
                    <Grid item sm={2}>
                        <div className={this.props.classes.leftPane}>
                            <Grid container spacing={0} direction={"column"} alignItems={"center"} justify={"center"}
                                  style={{paddingTop: '24px'}}>
                                <Grid item sm={12}>
                                    <div>
                                        <Typography variant={"h4"}>My Solar Scan</Typography>
                                    </div>

                                </Grid>
                            </Grid>
                        </div>
                    </Grid>
                    <Grid item sm={10}>
                        <Grid container spacing={0} direction={"column"} alignItems={"center"} justify={"center"}
                              style={{minHeight: '100vh'}}>
                            <Grid item sm={3}>
                                <div>
                                    <TextField
                                        autoFocus
                                        required
                                        margin="dense"
                                        id="username"
                                        label="USERNAME"
                                        type="text"
                                        fullWidth
                                        name={"username"}
                                        value={this.state.username}
                                        onChange={this.handleDialogChange}
                                    />
                                    <TextField
                                        autoFocus
                                        required
                                        margin="dense"
                                        id="password"
                                        label="PASSWORD"
                                        type="password"
                                        fullWidth
                                        name={"password"}
                                        value={this.state.password}
                                        onChange={this.handleDialogChange}
                                    />
                                    <Button variant="contained" color={"primary"}
                                            onClick={this.handleSubmit}>Login</Button>
                                </div>
                            </Grid>
                        </Grid>
                    </Grid>

                </Grid>
            </Fragment>
        )
    }
}

export default withStyles(styles, {withTheme: true})(Login);
