import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { Helmet } from "react-helmet";
import Header from "../../Components/Header";
import Input from "../../Components/Input";
import Button from "../../Components/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebook,
  faTwitter,
  faGithub,
  faGoogle,
} from "@fortawesome/free-brands-svg-icons";

const Wrapper = styled.div`
  width: 100%;
  height: 100vh;
  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 ToggleSpan = 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;
  a {
    &:not(:last-child) {
      margin-right: 20px;
    }
  }
  font-size: 30px;
  opacity: 0.8;
`;

export default ({
  action,
  setAction,
  email,
  password,
  password2,
  username,
  phoneNum,
  onSubmit,
}) => (
  <>
    <Header />
    <Wrapper>
      <TitleContainer>
        <Title>Linker</Title>
      </TitleContainer>
      <Form>
        {action === "logIn" ? (
          <>
            <Helmet>
              <title>Log In</title>
            </Helmet>
            <form onSubmit={onSubmit}>
              <Input placeholder={"Email"} type="email" {...email} />
              <Input placeholder={"Password"} type="password" {...password} />
              <Button text={"Log In"} />
            </form>
          </>
        ) : (
          <>
            <Helmet>
              <title>Sign Up</title>
            </Helmet>
            <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 ?
            <ToggleSpan onClick={() => setAction("signUp")}>
              {" "}
              Sign Up{" "}
            </ToggleSpan>
          </>
        ) : (
          <>
            Did you have an account ?
            <ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
          </>
        )}
      </StateChanger>
      <SocialLogin>
        <Link to="/facebook">
          <FontAwesomeIcon icon={faFacebook} />
        </Link>
        <Link to="/google">
          <FontAwesomeIcon icon={faGoogle} />
        </Link>
        <Link to="/twitter">
          <FontAwesomeIcon icon={faTwitter} />
        </Link>
        <Link to="/github">
          <FontAwesomeIcon icon={faGithub} />
        </Link>
      </SocialLogin>
    </Wrapper>
  </>
);