import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";
import playBadgeImg from "../images/google-play-badge.png";

const Container = styled.div`
  margin-top: 25px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0px 30px;
  width: 100%;
  box-sizing: border-box;
`;

const FlexContainer = styled.div`
  display: flex;
  align-items: flex-end;
`;

const Title = styled.h2`
  font-family: Muli;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 35px;
  color: #404040;

  margin: 0px;
  margin-right: 66px;
`;

const NavLink = styled.div`
  a {
    font-family: Muli;
    font-style: normal;
    font-weight: ${props => (props.selected ? "bold" : "normal")};
    font-size: 18px;
    line-height: 23px;
    color: ${props => (props.selected ? "#404040" : "#737373")};

    text-decoration: none;
    margin-right: 54px;
  }
`;

const PlayBadge = styled.img`
  height: 50px;
  transform: translateY(10px);
  margin-right: 70px;
`;

const SplashNav = () => {
  const [selectedPage, setSelectedPage] = useState(0);
  const { pathname } = useLocation();

  useEffect(() => {
    switch (pathname) {
      case "/splash":
        setSelectedPage(0);
        break;
      case "/splash/team":
        setSelectedPage(1);
        break;
    }
  }, [pathname]);

  return (
    <Container>
      <FlexContainer>
        <Title>Trash Panda</Title>
        <NavLink selected={selectedPage == 0}>
          <Link to="/splash">What We Do</Link>
        </NavLink>
        <NavLink selected={selectedPage == 1}>
          <Link to="/splash/team">Meet the Team</Link>
        </NavLink>
      </FlexContainer>
      <a href="https://play.google.com/store/apps/details?id=com.thetrashpanda.twa">
        <PlayBadge src={playBadgeImg} />
      </a>
    </Container>
  );
};

export default SplashNav;