import React, { useState } from "react"
import { useRouter } from "next/router"
​
import Avatar from "@material-ui/core/Avatar"
import Box from "@material-ui/core/Box"
import Button from "@material-ui/core/Button"
import CircularProgress from "@material-ui/core/CircularProgress"
import Container from "@material-ui/core/Container"
import TextField from "@material-ui/core/TextField"
import Typography from "@material-ui/core/Typography"
import LockOutlined from "@material-ui/icons/LockOutlined"
import { VariantType } from "notistack"
import { GoogleLoginResponse, GoogleLoginResponseOffline, useGoogleLogin } from "react-google-login"
import { useDispatch } from "react-redux"
import { v4 as uuidV4 } from "uuid"
​
import Google from "assets/icons/Google"
import Copyright from "components/copyright/Copyright"
import { googleSignInSuccess, serverSignIn } from "redux/auth/action"
import { enqueueSnackbar } from "redux/ui/actions"
import { Notification } from "redux/ui/reducers"
​
import { useStyles } from "./SignIn.style"
​
const SignIn: React.FC = () => {
    const classes = useStyles()
    const [loading, setLoading] = useState(false)
    const dispatch = useDispatch()
    const router = useRouter()
​
    const buildNotification = (message: string, variant: VariantType) => {
        const notification: Notification = ({
            message: message,
            options: {
                key: uuidV4(),
                variant: variant,
            },
        })
        dispatch(enqueueSnackbar(notification))
    }
​
    const { signIn, loaded } = useGoogleLogin({
        clientId: process.env.NEXT_PUBLIC_GOOGLE_OAUTH2_CLIENT_ID!,
        isSignedIn: false,
        uxMode: "popup",
        scope: "profile email",
        accessType: "online",
        responseType: "token",
        // prompt: "consent",
​
        onAutoLoadFinished: () => console.log("onAutoLoadFinished"),
        onSuccess: (loginResponse: GoogleLoginResponse | GoogleLoginResponseOffline) => {
            console.log(loginResponse)
            setLoading(false)
            if ("tokenObj" in loginResponse) {
                dispatch(googleSignInSuccess(loginResponse.tokenObj))
                const onServerSignInSuccess = () => router.push("/")
                dispatch(serverSignIn(loginResponse.tokenObj.id_token, onServerSignInSuccess))
                // dispatch(getUserData(loginResponse.tokenObj.id_token));
            }
        },
        onFailure: (error) => {
            console.log("onFailure", error)
            setLoading(false)
            buildNotification(error.error, "error")
        },
    })
​
    return (
        <Container component="main" maxWidth="xs">
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <LockOutlined/>
                </Avatar>
                <Typography component="h1" variant="h5">
                    Sign in
                </Typography>
                <form className={classes.form} noValidate>
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        id="email"
                        label="Email Address"
                        name="email"
                        autoComplete="email"
                        autoFocus
                        disabled={true}
                    />
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type="password"
                        id="password"
                        autoComplete="current-password"
                        disabled={true}
                    />
                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                        disabled={true}
                    >
                        Sign In
                    </Button>
​
                    <Typography variant="body2" color="textSecondary" align="center">OR</Typography>
                    <Button
                        type="button"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                        startIcon={!loaded || loading ? <CircularProgress size={24} color={"inherit"}/> : <Google/>}
                        onClick={() => {
                            setLoading(true)
                            signIn()
                        }}
                        disabled={!loaded || loading}
                    >
                        Sign In with Google
                    </Button>
​
                </form>
            </div>
            <Box mt={8}>
                <Copyright/>
            </Box>
        </Container>
    )
}
​
export default SignIn