navbarvini

import React, { useRef, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { unsetUser } from 'action/user';
import { removeJwt } from 'helpers/cookie';
import styled from 'styled-components';
import Avatar from 'components/Avatar';
import Link from 'next/link';
import { useRouter } from 'next/router';
import BaseButton from 'components/BaseButton';
import { HamburguerIcon } from 'components/icons';

const StyledAvatar = styled(Avatar)`
  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    margin: 20px 0 0 25px;
  }
`;

const UserOptions = styled.div`
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    opacity: 0;
    border-top: 1px solid #cccc;
    padding: 0;
    margin-top: 2.5rem;
    transition: none;
  }
`;

const Li = styled.li`
  font-size: 16px;

  a {
    font-size: inherit;
    height: 48px;
    display: block;
    vertical-align: middle;
    ${
      '' /* ${props => props.active && 'border-bottom: 1px solid currentColor;'} */
    }
  }

  // margin-right: 1rem
  cursor: pointer;
  padding: 0 1rem;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.05em;

  &.nav__logo {
    img {
      width: 6rem;
    }
  }

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    padding-bottom: 0;

    &.nav__logo {
      position: absolute;
      top: 10px;
      left: 0;
      margin: 0 0 0 48px;
    }

    &:not(.nav__logo) {
      opacity: 0;
      visibility: hidden;
      transition: visibility 0s 0.5s, opacity 0.5s;
      padding-left: 2rem;
      margin-top: 1rem;
      display: none;

      a {
        display: inline-block;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
      }
    }
  }

  @media (max-width: 480px) {
    &.nav__logo {
      margin: 0 0 0 16px;
    }
  }
`;

const NavItem = ({ href, children, ...props }) => {
  return (
    <Li className="nav__item" {...props}>
      <Link href={href} passHref>
        <a {...props}>{children}</a>
      </Link>
    </Li>
  );
};

const DropdownContent = styled.div`
  background-color: #fff;
  display: none;
  position: absolute;
  min-width: 148px;
  z-index: 1;
  border-radius: 0 0 32px 32px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
  top: 46px;
  left: -42px;

  a {
    color: #DBA080;
    text-align: center;
    padding: 12px 36px;
  }
`

const MobileNavItem = styled(NavItem)`
  display: none;

  @media (max-width: 960px) {
    display: block;
  }
`

const NavItemList = styled.ul`
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  max-width: 1200px;
  margin: 0 auto;

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    padding-top: 4rem;
    display: block;
    font-size: 1.2rem;
  }
`;

const NavMiddle = styled.div`
  display: flex;
  justify-content: center;

  .nav__item {
    position: relative;
    display: block;

    @media (min-width: 960px) {
      &:hover .dropdown-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    } 
  }

  .dropdown-navitem {
    // display: none;
  }

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    display: block;
  }
`;

const Hamburguer = styled(BaseButton)`
  display: none;
  position: absolute;
  padding: 12px 22px;
  right: 40px;

  svg {
    height: 2rem;
    width: 2rem;
  }

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    display: block;
  }

  @media (max-width: 480px) {
    right: 0px;
  }
`;

const NavBackdrop = styled.div`
  opacity: 1;
  position: fixed;
  z-index: 20;
  transition: all 0.5s;
  height: 100%;
  width: 100%;
  left: 0;
  top: 110vh;
  background-color: #000;
`;

const Nav = styled.nav`
  position: fixed;
  z-index: 100;
  top: 0;
  display: flex;
  width: 100%;
  height: 4rem;
  transition: height 0.4s, background-color 0.4s, color 0.8s;
  background-color: #fff;

  a {
    color: #DBA080;
  }

  ${props =>
    props.investorsColors &&
    `
      background-color: #fff;
      border-bottom: 1px solid #E6882F;
      
      a {
        color: #E6882F;
      }

      ${Hamburguer} {
        color: #E6882F;
      }

      ${NavItemList} {
        background-color: #fff;
      }
    `}

  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
    ${Hamburguer} {
      display: block;
      color: #DBA080;
    }

    ${props =>
      props.expanded &&
      `
      & + ${NavBackdrop} {
        opacity: 1;
        top: 0;
      }

      height: 32.5rem;
      background-color: #fff;
      color: black;

      ${UserOptions} {
        opacity: 1;
        transition: opacity 1s;
        display: block;
      }

      ${LoggedUser}{
        display: flex;
        margin-top: 8px;
      }

      .nav__item {
        font-size: 1.2rem;
        &:not(.nav__logo) {
          display: block;
          opacity: 1;
          visibility: initial;
          transition: opacity 1.5s;
        }
      }
    `}
  }

  @media (max-width: 600px) {
    ${props => props.expanded && `height: 31.5rem;`}
  }
`;

const LoggedUser = styled.div`
  display: flex;
  align-items: center;
`;

function NavBar(props) {
  const [isExpanded, setIsExpanded] = useState(false);
  const navRef = useRef(null);
  const router = useRouter();
  const dispatch = useDispatch();
  const user = useSelector(state => state.user);

  const signOut = e => {
    removeJwt();
    dispatch(unsetUser());
  };

  return (
    <Nav {...props} expanded={isExpanded} ref={navRef}>
      <Hamburguer
        onClick={() => setIsExpanded(prev => !prev)}
        aria-label={'Menu Button'}
      >
        <HamburguerIcon />
      </Hamburguer>
      <NavItemList>
        <NavItem href="/" className="nav__item nav__logo">
          {props.investorsColors ? (
            <img src="/assets/logoNova-EF9E51.svg" alt="Logomarca" />
          ) : (
            <img src="/assets/logoNova-DBA080.svg" alt="Logomarca" />
          )}
        </NavItem>

        <NavMiddle>
          <NavItem href="/apes">
            More com a Divid
          </NavItem>
          <NavItem href="/saiba-mais">
            Sobre a Divid
          </NavItem>
          <NavItem
            href="https://more.divid.com.br/para-proprietarios"
            target={'_blank'}
          >
            Proprietários
          </NavItem>
          <NavItem href="/invista">
            Investidores
          </NavItem>
          <NavItem href="">
            Indique
            <DropdownContent className="dropdown-content">
              <a href="https://more.divid.com.br/indicacao" target="_blank" className="dropdown-anchor">Moradores</a>
              <a href="https://more.divid.com.br/indicacao-proprietario" target="_blank" className="dropdown-anchor">Proprietários</a>
            </DropdownContent>
          </NavItem>
          <MobileNavItem href="">
            Moradores
          </MobileNavItem>
        </NavMiddle>

        <UserOptions>
          {user ? (
            <LoggedUser>
              <StyledAvatar size="small" user={user} navbar />
              <NavItem onClick={signOut} href="/">
                Sair
              </NavItem>
            </LoggedUser>
          ) : (
            <>
              <NavItem href="/entrar">Entrar</NavItem>
            </>
          )}
        </UserOptions>
      </NavItemList>
    </Nav>
  );
}

export default NavBar;