<commit_before>import cookie from "cookies-js"
import React, { useContext, useEffect, useState } from "react"
import styled from "styled-components"

import {
  ArtsyMarkIcon,
  BellIcon,
  Box,
  Button,
  ChevronIcon,
  color,
  EnvelopeIcon,
  Flex,
  Link,
  SoloIcon,
  space,
  Spacer,
} from "@artsy/palette"

import { SystemContext } from "Artsy/SystemContext"
import { SearchBarQueryRenderer as SearchBar } from "Components/Search/SearchBar"

import {
  DropDownNavMenu,
  MobileNavMenu,
  MobileToggleIcon,
  MoreNavMenu,
  NotificationsMenu,
  UserMenu,
} from "./Menus"

import { ModalType } from "Components/Authentication/Types"
import { menuData, MenuLinkData } from "Components/NavBar/menuData"
import { openAuthModal } from "Utils/openAuthModal"

import { NavItem } from "./NavItem"
import { NotificationsBadge } from "./NotificationsBadge"

import { AuthIntent, ContextModule } from "@artsy/cohesion"
import { AnalyticsSchema } from "Artsy"
import { track, useTracking } from "Artsy/Analytics"
import Events from "Utils/Events"
import { useMedia } from "Utils/Hooks/useMedia"
import { userHasLabFeature } from "Utils/user"

export const NavBar: React.FC = track(
  {
    flow: AnalyticsSchema.Flow.Header,
    context_module: AnalyticsSchema.ContextModule.Header,
  },
  {
    dispatch: data => Events.postEvent(data),
  }
)(() => {
  const { trackEvent } = useTracking()
  const { mediator, user, EXPERIMENTAL_APP_SHELL } = useContext(SystemContext)
  const [showMobileMenu, toggleMobileNav] = useState(false)
  const { xs, sm } = useMedia()
  const isMobile = xs || sm
  const isLoggedIn = Boolean(user)
  const conversationsEnabled = userHasLabFeature(
    user,
    "User Conversations View"
  )
  const canViewNewDropDown = userHasLabFeature(user, "Updated Navigation")
  const {
    links: [artworks, artists],
  } = menuData

  const getNotificationCount = () => cookie.get("notification-count") || 0

  // Close mobile menu if dragging window from small size to desktop
  useEffect(() => {
    if (!isMobile) {
      toggleMobileNav(false)
    }
  }, [isMobile])

  /**
   * Check to see if we're clicking a link that lives within the new app shell
   * and close the navbar.
   *
   * TODO: Find a less naive way to check if route is in appshell
   */
  const handleMobileNavClick = event => {
    // FIXME: Remove once experimental A/B test completes
    if (EXPERIMENTAL_APP_SHELL) {
      // Includes /collect or /collections
      if (event.target?.parentNode?.href?.includes("/collect")) {
        toggleMobileNav(false)
      }
    }
  }

  return (
    <header>
      <NavBarContainer px={1}>
        <NavSection>
          <Link href="/" style={{ display: "flex" }}>
            <ArtsyMarkIcon height={40} width={40} />
          </Link>
        </NavSection>

        <Spacer mr={1} />

        <NavSection width="100%">
          <Box width="100%">
            <SearchBar />
          </Box>
        </NavSection>

        <Spacer mr={2} />

        {/*
          Desktop. Collapses into mobile at `sm` breakpoint.
        */}
        <NavSection display={["none", "none", "flex"]}>
          <NavSection>
            {canViewNewDropDown ? (
              <NavItem
                label="Artworks"
                isFullScreenDropDown
                Menu={({ setIsVisible }) => {
                  return (
                    <Box>
                      <DropDownNavMenu
                        width="100vw"
                        menu={(artworks as MenuLinkData).menu}
                        contextModule={
                          AnalyticsSchema.ContextModule.HeaderArtworksDropdown
                        }
                        onClick={() => {
                          if (EXPERIMENTAL_APP_SHELL) {
                            setIsVisible(false)
                          }
                        }}
                      />
                    </Box>
                  )
                }}
              >
                <Flex>
                  Artworks
                  <ChevronIcon
                    direction="down"
                    color={color("black100")}
                    height="15px"
                    width="15px"
                    top="5px"
                    left="4px"
                  />
                </Flex>
              </NavItem>
            ) : (
              <NavItem href="/collect">Artworks</NavItem>
            )}

            {canViewNewDropDown ? (
              <NavItem
                label="Artists"
                isFullScreenDropDown
                Menu={({ setIsVisible }) => {
                  return (
                    <Box>
                      <DropDownNavMenu
                        width="100vw"
                        menu={(artists as MenuLinkData).menu}
                        contextModule={
                          AnalyticsSchema.ContextModule.HeaderArtistsDropdown
                        }
                        onClick={() => {
                          if (EXPERIMENTAL_APP_SHELL) {
                            setIsVisible(false)
                          }
                        }}
                      />
                    </Box>
                  )
                }}
              >
                <Flex>
                  Artists
                  <ChevronIcon
                    direction="down"
                    color={color("black100")}
                    height="15px"
                    width="15px"
                    top="5px"
                    left="4px"
                  />
                </Flex>
              </NavItem>
            ) : (
              <NavItem href="/artists">Artists</NavItem>
            )}

            <NavItem href="/auctions">Auctions</NavItem>
            <NavItem href="/articles">Editorial</NavItem>
            <NavItem
              label="More"
              Menu={() => {
                return (
                  <Box mr={-150}>
                    <MoreNavMenu width={160} />
                  </Box>
                )
              }}
            >
              <Flex>
                More
                <ChevronIcon
                  direction="down"
                  color={color("black100")}
                  height="15px"
                  width="15px"
                  top="5px"
                  left="4px"
                />
              </Flex>
            </NavItem>
          </NavSection>

          <NavSection><commit_msg>remove feature flag to launch to all users<commit_after>import cookie from "cookies-js"
import React, { useContext, useEffect, useState } from "react"
import styled from "styled-components"

import {
  ArtsyMarkIcon,
  BellIcon,
  Box,
  Button,
  ChevronIcon,
  color,
  EnvelopeIcon,
  Flex,
  Link,
  SoloIcon,
  space,
  Spacer,
} from "@artsy/palette"

import { SystemContext } from "Artsy/SystemContext"
import { SearchBarQueryRenderer as SearchBar } from "Components/Search/SearchBar"

import {
  DropDownNavMenu,
  MobileNavMenu,
  MobileToggleIcon,
  MoreNavMenu,
  NotificationsMenu,
  UserMenu,
} from "./Menus"

import { ModalType } from "Components/Authentication/Types"
import { menuData, MenuLinkData } from "Components/NavBar/menuData"
import { openAuthModal } from "Utils/openAuthModal"

import { NavItem } from "./NavItem"
import { NotificationsBadge } from "./NotificationsBadge"

import { AuthIntent, ContextModule } from "@artsy/cohesion"
import { AnalyticsSchema } from "Artsy"
import { track, useTracking } from "Artsy/Analytics"
import Events from "Utils/Events"
import { useMedia } from "Utils/Hooks/useMedia"
import { userHasLabFeature } from "Utils/user"

export const NavBar: React.FC = track(
  {
    flow: AnalyticsSchema.Flow.Header,
    context_module: AnalyticsSchema.ContextModule.Header,
  },
  {
    dispatch: data => Events.postEvent(data),
  }
)(() => {
  const { trackEvent } = useTracking()
  const { mediator, user, EXPERIMENTAL_APP_SHELL } = useContext(SystemContext)
  const [showMobileMenu, toggleMobileNav] = useState(false)
  const { xs, sm } = useMedia()
  const isMobile = xs || sm
  const isLoggedIn = Boolean(user)
  const conversationsEnabled = userHasLabFeature(
    user,
    "User Conversations View"
  )
  const {
    links: [artworks, artists],
  } = menuData

  const getNotificationCount = () => cookie.get("notification-count") || 0

  // Close mobile menu if dragging window from small size to desktop
  useEffect(() => {
    if (!isMobile) {
      toggleMobileNav(false)
    }
  }, [isMobile])

  /**
   * Check to see if we're clicking a link that lives within the new app shell
   * and close the navbar.
   *
   * TODO: Find a less naive way to check if route is in appshell
   */
  const handleMobileNavClick = event => {
    // FIXME: Remove once experimental A/B test completes
    if (EXPERIMENTAL_APP_SHELL) {
      // Includes /collect or /collections
      if (event.target?.parentNode?.href?.includes("/collect")) {
        toggleMobileNav(false)
      }
    }
  }

  return (
    <header>
      <NavBarContainer px={1}>
        <NavSection>
          <Link href="/" style={{ display: "flex" }}>
            <ArtsyMarkIcon height={40} width={40} />
          </Link>
        </NavSection>

        <Spacer mr={1} />

        <NavSection width="100%">
          <Box width="100%">
            <SearchBar />
          </Box>
        </NavSection>

        <Spacer mr={2} />

        {/*
          Desktop. Collapses into mobile at `sm` breakpoint.
        */}
        <NavSection display={["none", "none", "flex"]}>
          <NavSection>
            <NavItem
              label="Artworks"
              isFullScreenDropDown
              Menu={({ setIsVisible }) => {
                return (
                  <Box>
                    <DropDownNavMenu
                      width="100vw"
                      menu={(artworks as MenuLinkData).menu}
                      contextModule={
                        AnalyticsSchema.ContextModule.HeaderArtworksDropdown
                      }
                      onClick={() => {
                        if (EXPERIMENTAL_APP_SHELL) {
                          setIsVisible(false)
                        }
                      }}
                    />
                  </Box>
                )
              }}
            >
              <Flex>
                Artworks
                <ChevronIcon
                  direction="down"
                  color={color("black100")}
                  height="15px"
                  width="15px"
                  top="5px"
                  left="4px"
                />
              </Flex>
            </NavItem>

            <NavItem
              label="Artists"
              isFullScreenDropDown
              Menu={({ setIsVisible }) => {
                return (
                  <Box>
                    <DropDownNavMenu
                      width="100vw"
                      menu={(artists as MenuLinkData).menu}
                      contextModule={
                        AnalyticsSchema.ContextModule.HeaderArtistsDropdown
                      }
                      onClick={() => {
                        if (EXPERIMENTAL_APP_SHELL) {
                          setIsVisible(false)
                        }
                      }}
                    />
                  </Box>
                )
              }}
            >
              <Flex>
                Artists
                <ChevronIcon
                  direction="down"
                  color={color("black100")}
                  height="15px"
                  width="15px"
                  top="5px"
                  left="4px"
                />
              </Flex>
            </NavItem>

            <NavItem href="/auctions">Auctions</NavItem>
            <NavItem href="/articles">Editorial</NavItem>
            <NavItem
              label="More"
              Menu={() => {
                return (
                  <Box mr={-150}>
                    <MoreNavMenu width={160} />
                  </Box>
                )
              }}
            >
              <Flex>
                More
                <ChevronIcon
                  direction="down"
                  color={color("black100")}
                  height="15px"
                  width="15px"
                  top="5px"
                  left="4px"
                />
              </Flex>
            </NavItem>
          </NavSection>

          <NavSection>
{'fraction_non_alphanumeric': 0.10507740434747734, 'fraction_numerical': 0.008502446458650838, 'mean_word_length': 1.3365817091454273, 'pattern_counts': {'":': 0, '<': 99, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3376162', 'n_tokens_mistral': 3478, 'n_tokens_neox': 3231, 'n_words': 693}