import * as React from "react";
import { useFormik } from "formik";
import { Link, Route, RouteProps, Redirect } from "react-router-dom";
import firebase from "firebase/app";

import styled from "styled-components";
import { Button, Text } from "../../components/atoms";
import ProgressBar from "../../components/progress";
import { IError } from "../../interface/error";
import { IUser } from "../../interface/user";

const Input = styled.input`
  height: 32px;
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: 4px;
  border-style: solid;
  width: 320px;
  padding: 2px 4px;
`;

const Logo = styled.img`
  height: 60px;
`;

const StyledLink = styled(Link)`
  color: ${({ theme }) => theme.colors.primary};
  text-decoration: none;
  &:visited {
    text-decoration: none;
    color: ${({ theme }) => theme.colors.primary};
  }
`;

interface ISignInDetail {
  name: string;
  password: string;
  email: string;
}

const signUp = (
  { name, password, email }: ISignInDetail,
  setLoading: (loading: boolean) => void,
  setError: (error: string) => void
) => {
  setError("");
  setLoading(true);
  firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((result) => {
      setLoading(false);
      return result.user.updateProfile({
        displayName: name,
      });
    })
    .catch((error: IError) => {
      setLoading(false);
      setError(error.message);
    });
};

const signIn = (
  { email, password }: ISignInDetail,
  setLoading: (loading: boolean) => void,
  setError: (error: string) => void,
  setRedirect: (path: string) => void
) => {
  setError("");
  setLoading(true);
  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      setLoading(false);
      setRedirect("/");
    })
    .catch((error: IError) => {
      setLoading(false);
      setError(error.message);
    });
};

interface IProps extends RouteProps {
  user: IUser;
}

const Registration = ({ user, location }: IProps) => {
  const isRegistration = location.pathname === "/auth/register";
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [redirect, setRedirect] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (user) {
      setRedirect("/");
    }
  }, [user]);

  const { values, handleBlur, handleChange, handleSubmit } = useFormik({
    initialValues: {
      name: "",
      email: "",
      password: "",
    },
    onSubmit: (values) => {
      if (isRegistration) {
        signUp(values, setLoading, setError);
      } else {
        signIn(values, setLoading, setError, setRedirect);
      }
    },
  });

  if (redirect) {
    return <Redirect to={redirect} />;
  }

  return (
    <div className="flex flex-column align-items-center justify-content-center h-100">
      {loading && <ProgressBar />}
      <Logo src="../mokku.svg" />
      <h2>Mokku</h2>
      <form className="flex flex-column p-relative">
        <Route path="/auth/register">
          <Input
            placeholder="Name"
            className="mb-8"
            required
            name="name"
            value={values.name}
            onChange={handleChange}
            onBlur={handleBlur}
            disabled={loading}
          />
        </Route>
        <Input
          placeholder="Email"
          className="mb-8"
          required
          name="email"
          type="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
          disabled={loading}
        />
        <Input
          placeholder="Password"
          className="mb-8"
          required
          name="password"
          type="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
          disabled={loading}
        />
        <div className="flex justify-content-between mt-8">
          <div className="mr-8 flex flex-column justify-content-between">
            <StyledLink to="/forget-password">Forget password?</StyledLink>
            {isRegistration && <StyledLink to="/auth">Sign in</StyledLink>}
            {!isRegistration && (
              <StyledLink to="/auth/register">Sign up</StyledLink>
            )}
          </div>
          <Button
            disabled={loading}
            color="white"
            background="primary"
            type="button"
            onClick={() => handleSubmit()}
          >
            {isRegistration ? "SIGN UP" : "SIGN IN"}
          </Button>
        </div>
        {error && (
          <Text className="p-absolute" style={{ bottom: -48 }} color="alert">
            {error}
          </Text>
        )}
      </form>
    </div>
  );
};

export default Registration;