import React, { Dispatch, useEffect } from "react";
import { Page } from "@/pages/base";
import { Button, CircularProgress, Container, SvgIcon, Typography } from "@material-ui/core";
import { Action, StudentActions, useDispatch } from "@/state/actions";
import { Route, Switch, useHistory, useLocation, useRouteMatch } from "react-router-dom";
import { route } from "@/routing";
import { useVerticalSpacing } from "@/styles";
import { AppState } from "@/state/reducer";

import api from "@/api";
import { UserActions } from "@/state/actions/user";
import { getAuthorizeUrl } from "@/api/user";
import { useTranslation } from "react-i18next";
import { Loading } from "@/components/loading";
import GUTLogo from "!@svgr/webpack!@/../public/img/pg-logo.svg";


type AuthorizeUserOptions = {
    isStudent?: boolean;
    isManager?: boolean;
}

const authorizeUser = (code?: string, { isStudent = false, isManager = false }: AuthorizeUserOptions = { isStudent: true }) => async (dispatch: Dispatch<Action>, getState: () => AppState): Promise<void> => {
    const token = await api.user.login(code);

    dispatch({
        type: UserActions.Login,
        token,
        isStudent,
        isManager,
    })

    const student = await api.student.current();
    dispatch({
        type: StudentActions.Set,
        student: student,
    })
}

export const UserLoginPage = () => {
    const dispatch = useDispatch();
    const history  = useHistory();
    const match    = useRouteMatch();
    const location = useLocation();
    const query    = new URLSearchParams(useLocation().search);
    const { t }    = useTranslation();

    const handleSampleAdminLogin = async () => {
        await dispatch(authorizeUser(undefined, { isManager: true }));

        history.push(route("management:index"));
    }

    const handleSampleStudentLogin = async () => {
        await dispatch(authorizeUser());

        history.push(route("home"));
    }

    const handlePgLogin = async () => {
        history.push(route("user_login") + "/pg");
    }

    const classes = useVerticalSpacing(2);

    useEffect(() => {
        (async function() {
            if (location.pathname === `${match.path}/check/pg`) {
                await dispatch(authorizeUser(query.get("code") as string));
                history.push("/");
            }
        })();
    }, [ match.path ]);

    const inProgress = <Loading size="4rem" label={ t("login-in-progress") }/>

    return <Page>
        <Page.Header maxWidth="md">
            <Page.Title>{ t("login") }</Page.Title>
        </Page.Header>
        <Container>
            <Switch>
                <Route path={match.path} exact>
                    <Container maxWidth="md" className={ classes.root }>
                        <Button fullWidth onClick={ handlePgLogin } variant="contained" color="primary" startIcon={
                            // @ts-ignore
                            <GUTLogo style={{ height: "1.25rem" }} viewBox="0 0 144 64" />
                        }>
                            { t("login-as.gut-account") }
                        </Button>
                        <Typography variant="subtitle2">{ t("login-as.sample") }</Typography>
                        <Button fullWidth onClick={ handleSampleStudentLogin } variant="contained" color="secondary">{ t("login-as.sample-student")}</Button>
                        <Button fullWidth onClick={ handleSampleAdminLogin } variant="contained" color="secondary">{ t("login-as.sample-manager")}</Button>
                    </Container>
                </Route>
                <Route path={`${match.path}/pg`} render={ () => {
                    window.location.href = getAuthorizeUrl()

                    return inProgress
                } } />
                <Route path={`${match.path}/check/pg`}>
                    { inProgress }
                </Route>
            </Switch>
        </Container>
    </Page>;
}