import styled from "@emotion/styled";
import React, { useState } from "react";
import { useMutation, useQuery } from "react-apollo";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { LIGHT_PRIMARY_THREE, LIGHT_SECONDARY_ONE } from "../../shared/colors";
import { CurrentUser, LogIn } from "../graphql/generated/types";
import { LOG_IN } from "../graphql/mutations";
import { CURRENT_USER } from "../graphql/queries";
import { setItem } from "../storage";

type Props = {} & RouteComponentProps;

function Login(props: Props) {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [login] = useMutation<LogIn>(LOG_IN);

  const { data, loading } = useQuery<CurrentUser>(CURRENT_USER, {
    fetchPolicy: "network-only",
  });

  const attemptLogin = async () => {
    const data = await login({
      variables: {
        input: {
          email,
          password,
        },
      },
    });

    const token = data!.data!.login.token || "";
    await setItem("authToken", token);
    window.location.reload();
  };

  if (loading) {
    return <div>Loading</div>;
  } else if (data && data.me) {
    props.history.push("/");
  }

  return (
    <Container>
      <Content>
        <LoginTitle>Login to Flow</LoginTitle>
        <Input
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <SignUpButton onClick={attemptLogin}>Log In</SignUpButton>
      </Content>
    </Container>
  );
}

export default withRouter(Login);

const LoginTitle = styled.div`
  font-style: normal;
  line-height: normal;
  color: ${LIGHT_SECONDARY_ONE};
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
`;

const Container = styled.div`
  -webkit-app-region: drag;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(240, 242, 246, 1));
`;

const Input = styled.input`
  font-size: 13px;
  color: ${LIGHT_SECONDARY_ONE};
  -webkit-appearance: none;
  width: calc(100% - 24px);
  height: 34px;
  padding: 6px 12px;
  background: ${LIGHT_PRIMARY_THREE};
  border: 1px solid rgb(60, 63, 68);
  border-image: initial;
  border-radius: 4px;
  margin: 0px;
  :active {
    outline: none;
  }
  margin-bottom: 8px;
`;

const Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
`;

const SignUpButton = styled.div`
  width: calc(100% - 42px);
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  line-height: normal;
  font-size: 13px;
  transition-property: border, background, color, box-shadow;
  transition-duration: 0.2s;
  user-select: none;
  cursor: pointer;
  -webkit-app-region: no-drag;
  min-width: 32px;
  height: 32px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px;
  color: rgb(215, 216, 219);
  border-radius: 4px;
  margin: 0px;
  padding: 0px 21px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(60, 63, 68);
  border-image: initial;
  background: rgb(48, 50, 54);
`;