import React from "react";
import {
  CloudBeesNavigation,
  Navbar,
  NavbarBrand,
  NavbarItem,
  NavbarLink,
  NavbarNav,
  CloudBeesNavigationItem,
  CloudBeesNavigationHeader
} from "../..";
import rightArrowIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/keyboard_arrow_right.svg";
import checkIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/check.svg";
import CloudBeesLogoIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/src/svg-logos/cloudbees-logo-color.svg";

import { Icon } from "../..";
import CloudBeesNavigationItemTitle from "../navbar-cloudbees-navigation-item-title";
import CloudBeesNavigationItemSubtext from "../navbar-cloudbees-navigation-item-subtext";
import CloudBeesNavigationIcon from "../navbar-cloudbees-navigation-icon";
import CloudBeesNavigationBadge from "../navbar-cloudbees-navigation-badge";

export default (
  <div className="mb-5">
    <Navbar expand="lg" variant="light" bg="white">
      <CloudBeesNavigation
        modifiers={{
          offset: {
            offset: "32%, 12.5%"
          }
        }}
        as="div"
        header={
          <CloudBeesNavigationHeader>
            CloudBees Software Delivery Automation
          </CloudBeesNavigationHeader>
        }
      >
        <CloudBeesNavigationItem
          as="a"
          isActive={true}
          href=""
          title={<CloudBeesNavigationItemTitle>Analytics</CloudBeesNavigationItemTitle>}
          icon={<CloudBeesNavigationIcon id={checkIcon.id} viewBox={checkIcon.viewBox} />}
          subText={
            <CloudBeesNavigationItemSubtext className="small mt-1">
              Some help text
            </CloudBeesNavigationItemSubtext>
          }
        />

        <CloudBeesNavigationItem
          as="a"
          href=""
          title={<CloudBeesNavigationItemTitle>CD/ARO</CloudBeesNavigationItemTitle>}
          icon={<CloudBeesNavigationIcon id={rightArrowIcon.id} viewBox={rightArrowIcon.viewBox} />}
        />

        <CloudBeesNavigationItem
          subText={<CloudBeesNavigationItemSubtext>Discover:</CloudBeesNavigationItemSubtext>}
        />

        <CloudBeesNavigationItem
          as="a"
          href=""
          title={<CloudBeesNavigationItemTitle>CI</CloudBeesNavigationItemTitle>}
          badge={<CloudBeesNavigationBadge>Learn more</CloudBeesNavigationBadge>}
        />
      </CloudBeesNavigation>
      <NavbarBrand className="mx-3">
        <Icon id={CloudBeesLogoIcon.id} viewBox={CloudBeesLogoIcon.viewBox} width={131} />
      </NavbarBrand>
      <NavbarNav>
        <NavbarItem active={true}>
          <NavbarLink href="">Home</NavbarLink>
        </NavbarItem>
      </NavbarNav>
    </Navbar>
  </div>
);