import React, { useContext } from "react";
import { Link as RouterLink, Redirect } from "react-router-dom";
import { userService } from "Services/userService.js";
import { UserContext } from "Services/UserContext.js";
import LoginForm from "Forms/Authorization/Login.js";
import EnterPhone from "Forms/Authorization/EnterPhone";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Link from "@material-ui/core/Link";

import {
  Facebook,
  Google,
  PhoneNumber as PhoneButton
} from "Forms/Authorization/Buttons";

export default function Login() {
  const { user, setUser } = useContext(UserContext);
  let think;
  const [dialog, setDialog] = React.useState(false);
  const [agreed, setAgreed] = React.useState(true);
  const [socialFirst, setSocialFirst] = React.useState(false);
  const [tokenValid, setTokenValid] = React.useState(false);
  const [credits, setCredits] = React.useState({
    type: "",
    phoneNumber: "",
    password: "",
    firstName: "",
    lastName: "",
    country: "TJ",
    countryCode: "+992"
  });

  const handleCreditChange = event => {
    setCredits({ ...credits, [event.target.name]: event.target.value });
  };

  const handleClickAgreed = agr => {
    setAgreed(agr);
  };

  const handleDialogAction = act => {
    setDialog(act);
  };

  const handleSubmit = () => {
    if (credits.type == "phoneNumber") {
      let sendCredits = {
        "phoneNumber": credits.countryCode.slice(1) + credits.phoneNumber,
        "password": credits.password
      }
      userService.login(sendCredits).then(setUser);
    }
    else {
      if (agreed) {
        let sendCredits = credits;
        sendCredits["phoneNumber"] =
          credits.countryCode.slice(1) + credits.phoneNumber;
        userService.regin(sendCredits).then(setUser);
      } else {
        handleDialogAction(true);
      }
    }
  };

  const phoneLogin = () => {
    setCredits({ ...credits, type: "phoneNumber" });
  };

  const responseFacebook = response => {
    if (response) {
      console.log(response);
      const fb = {
        phoneNumber: "",
        name: response.name,
        firstName: response.first_name,
        lastName: response.last_name,
        facebook_id: response.userID,
        facebook_token: response.accessToken,
        type: "facebook",
        country: "TJ",
        countryCode: "+992"
      };
      setCredits(fb);
      userService.checkTokenId(fb.facebook_id, fb.facebook_token, "facebook").then(res => {setTokenValid(res);});
    } else {
      alert("Error");
    }
  };

  const responseGoogle = response => {
    if (response) {
      const ggl = {
        phone_number: "",
        name: response.profileObj.name,
        first_name: response.profileObj.givenName,
        last_name: response.profileObj.familyName,
        auth_id: response.profileObj.googleId,
        auth_token: response.accessToken,
        type: "google"
      };
      setCredits(ggl);
    } else {
      alert("Error");
    }
  };

  if (tokenValid) {
    userService.isUserOld(credits.facebook_id, credits.type).then(res => {
      res ? setUser(res) : setSocialFirst(true)
    });

    setTokenValid(false);
  }

  if (credits.type == "phoneNumber") {
    think = (
      <LoginForm
        credits={credits}
        dialog={dialog}
        agreed={agreed}
        onSubmit={handleSubmit}
        onCreditChange={handleCreditChange}
        onClickAgreed={handleClickAgreed}
        onDialogAction={handleDialogAction}
      />
    );
  }
  else if (socialFirst) {
    think = (
      <EnterPhone
        credits={credits}
        dialog={dialog}
        agreed={agreed}
        onSubmit={handleSubmit}
        onCreditChange={handleCreditChange}
        onClickAgreed={handleClickAgreed}
        onDialogAction={handleDialogAction}
      />
    )
  }
  else {
    think = <>
      <Typography component="h1" variant="h5">
        Вход
      </Typography>

      <Grid container>
        <Grid item xs={12}>
          <Facebook responseFacebook={responseFacebook} type={'login'} />
        </Grid>
        <Grid item xs={12}>
          <Google responseGoogle={responseGoogle} type={'login'} />
        </Grid>
        <Grid item xs={12}>
          <PhoneButton phoneRegistration={phoneLogin} type={'login'} />
        </Grid>
      </Grid>
      <Grid container justify="flex-end">
        <Grid item>
          <Link component={RouterLink} to={"/login"} variant="body2">
            Уже зарегистрированы? Войти
          </Link>
        </Grid>
      </Grid>
    </>;
  }

  return Boolean(user) ? <Redirect to="/" /> : think ;
}