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 /*#__PURE__*/ React.createElement(
    Header,
    null,
    /*#__PURE__*/ React.createElement(
      Link,
      {
        to: '/',
      },
      /*#__PURE__*/ React.createElement(Logo, {
        src: '/images/logo.png',
        alt: 'Data Beaver',
      })
    ),
    /*#__PURE__*/ React.createElement(TabSwitch, null),
    /*#__PURE__*/ React.createElement(
      UserNav,
      null,
      /*#__PURE__*/ React.createElement(GrowthTools, {
        showGrowth: showGrowth,
        setShowGrowth: setShowGrowth,
        setShowProfile: setShowProfile,
      }),
      /*#__PURE__*/ React.createElement(ProfileDrop, {
        userProfile: userProfile,
        showProfile: showProfile,
        setShowProfile: setShowProfile,
        setShowGrowth: setShowGrowth,
      })
    )
  );
};
export const FormBuilderNav = () => {
  const [showProfile, setShowProfile] = useState(false);
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Header,
      null,
      /*#__PURE__*/ React.createElement(
        Link,
        {
          to: '/forms',
          className: 'back-link',
        },
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: '/images/icons.svg#logo',
          })
        ),
        /*#__PURE__*/ React.createElement('span', null, 'Back to Forms')
      ),
      /*#__PURE__*/ React.createElement('h3', null, 'Settings'),
      /*#__PURE__*/ React.createElement(
        UserNav,
        null,
        /*#__PURE__*/ React.createElement(ProfileDrop, {
          showProfile: showProfile,
          setShowProfile: setShowProfile,
        })
      )
    )
  );
};
export const SettingsNav = ({ userProfile }) => {
  const [showProfile, setShowProfile] = useState(false);
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Header,
      null,
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'first-child',
        },
        /*#__PURE__*/ React.createElement(
          Link,
          {
            to: '/',
            className: 'back-link',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#logo',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Back to Forms')
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'absolute-center center-child',
        },
        /*#__PURE__*/ React.createElement(
          NavLink,
          {
            to: '/profile/',
          },
          'Settings'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'last-child',
        },
        /*#__PURE__*/ React.createElement(
          UserNav,
          null,
          /*#__PURE__*/ React.createElement(SingleProfileDrop, {
            showProfile: showProfile,
            userProfile: userProfile,
            setShowProfile: setShowProfile,
          })
        )
      )
    )
  );
};
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;
  }
`;
