import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import styled from 'styled-components';
import {
  GrowthTools,
  ProfileDrop,
} from '../../components/common/menus/NavMenu';
import TabSwitch from './form-tabs/TabSwitch';
import { SingleProfileDrop } from '../../components/dropdowns/NavDrop';
// import { SingleProfileDrop } from '../../components/dropdowns/navDrop';

export const Navbar = ({ userProfile }) => {
  const [showGrowth, setShowGrowth] = useState(false);
  const [showProfile, setShowProfile] = useState(false);

  return (
    <Header>
      <Link to="/">
        <Logo src="/images/logo.png" alt="Data Beaver" />
      </Link>
      <TabSwitch />
      <UserNav>
        <GrowthTools
          showGrowth={showGrowth}
          setShowGrowth={setShowGrowth}
          setShowProfile={setShowProfile}
        />
        <ProfileDrop
          userProfile={userProfile}
          showProfile={showProfile}
          setShowProfile={setShowProfile}
          setShowGrowth={setShowGrowth}
        />
      </UserNav>
    </Header>
  );
};

export const FormBuilderNav = () => {
  const [showProfile, setShowProfile] = useState(false);
  return (
    <React.Fragment>
      <Header>
        <Link to="/forms" className="back-link">
          <svg>
            <use href="/images/icons.svg#logo"></use>
          </svg>
          <span>Back to Forms</span>
        </Link>
        <h3>Settings</h3>
        <UserNav>
          <ProfileDrop
            showProfile={showProfile}
            setShowProfile={setShowProfile}
          />
        </UserNav>
      </Header>
    </React.Fragment>
  );
};

export const SettingsNav = ({ userProfile }) => {
  const [showProfile, setShowProfile] = useState(false);
  return (
    <React.Fragment>
      <Header>
        <div className="first-child">
          <Link to="/" className="back-link">
            <svg>
              <use href="/images/icons.svg#logo"></use>
            </svg>
            <span>Back to Forms</span>
          </Link>
        </div>
        <div className="absolute-center center-child">
          <NavLink to="/profile/">Settings</NavLink>
        </div>
        <div className="last-child">
          <UserNav>
            <SingleProfileDrop
              showProfile={showProfile}
              userProfile={userProfile}
              setShowProfile={setShowProfile}
            />
          </UserNav>
        </div>
      </Header>
    </React.Fragment>
  );
};

const Header = styled.header`
  background: ${props => (props.bg ? props.bg : ' var(--main-background)')};
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: ${props => (props.deco ? props.deco : '')};
  .absolute-center {
    a {
      color: #61677c;
      font-size: 1.6rem;
    }
  }
  .back-link {
    display: flex;
    align-items: center;
    svg {
      width: 20px;
      height: 26px;
    }
    span {
      font-size: 1.6rem;
      font-weight: 500;
      font-family: var(--ff-medium);
      margin-left: 1.5rem;
    }
  }
`;
const UserNav = styled.div`
  display: flex;
  align-items: center;
`;
const Logo = styled.img`
  height: 20px;
  @media (min-width: 768px) {
    height: 26px;
  }
`;
