import React, { useState } from "react";
import styled from "styled-components";
import { useMutation } from "@apollo/react-hooks";
import { LOGIN } from "./AuthQueries";
import Input from "../../Components/Input";
import Button from "../../Components/Button";
import useInput from "../../Hooks/useInput";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebook,
  faTwitter,
  faGithub,
  faGoogle,
} from "@fortawesome/free-brands-svg-icons";

const Wrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Box = styled.div`
  display: flex;
`;

const TitleContainer = styled(Box)`
  margin-bottom: 20px;
`;

const Title = styled.span`
  font-size: 30px;
  font-family: "Raleway", sans-serif;
`;

const StateChanger = styled(Box)`
  margin-bottom: 15px;
`;

const Link = styled.span`
  cursor: pointer;
  color: #0652dd;
`;

const Form = styled(Box)`
  form {
    display: flex;
    flex-direction: column;
    padding: 5px 5px;
    margin-bottom: 15px;
    input {
      font-size: 15px;
      margin-bottom: 10px;
    }
    button {
      background-color: #1b9cfc;
      color: white;
      border-radius: 10px;
      padding: 10px 5px;
      font-size: 15px;
    }
  }
`;

const SocialLogin = styled(Box)`
  display: flex;
  svg {
    &:not(:last-child) {
      margin-right: 20px;
    }
  }
  font-size: 30px;
  opacity: 0.8;
`;

export default () => {
  const [action, setAction] = useState("logIn");

  const email = useInput("");
  const password = useInput("");
  const password2 = useInput("");
  const phoneNum = useInput("");
  const username = useInput("");
  const loginMutation = useMutation(LOGIN, {
    variables: { email: email.value, password: password.value },
  });

  const onSubmit = async (e) => {
    if (action === "logIn") {
      if (email.value !== "") {
        try {
          // QL 을 통해서 data 를 가져온다.
          const {
            data: { login }, // ?
          } = await loginMutation();
        } catch (e) {}
      }
    } else if (action === "signUp") {
    }
  };

  return (
    <Wrapper>
      <TitleContainer>
        <Title>KhuChat</Title>
      </TitleContainer>
      <Form>
        {action === "logIn" ? (
          <form onSubmit={onSubmit}>
            <Input placeholder={"Email"} type="email" {...email} />
            <Input placeholder={"Password"} type="password" {...password} />
            <Button text={"Log In"} />
          </form>
        ) : (
          <form onSubmit={onSubmit}>
            <Input placeholder={"Email"} type="email" {...email} />
            <Input placeholder={"UserName"} {...username} />
            <Input placeholder={"PhoneNumber"} {...phoneNum} />
            <Input placeholder={"Password"} type="password" {...password} />
            <Input
              placeholder={"Password for validation"}
              type="password"
              {...password2}
            />
            <Button text={"Sign Up"} />
          </form>
        )}
      </Form>
      <StateChanger>
        {action === "logIn" ? (
          <>
            Don't you have an account ?
            <Link onClick={() => setAction("signUp")}> Sign Up </Link>
          </>
        ) : (
          <>
            Did you have an account ?
            <Link onClick={() => setAction("logIn")}> Log in </Link>
          </>
        )}
      </StateChanger>
      <SocialLogin>
        <FontAwesomeIcon icon={faFacebook} />
        <FontAwesomeIcon icon={faGoogle} />
        <FontAwesomeIcon icon={faTwitter} />
        <FontAwesomeIcon icon={faGithub} />
      </SocialLogin>
    </Wrapper>
  );
};