<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { css } from '@datapunt/asc-core'
import { Header as HeaderComponent, styles, breakpoint, ascDefaultTheme } from '@datapunt/asc-ui'
import HeaderSearchContainer from '../../../header/containers/header-search/HeaderSearchContainer'
import { useAppReducer } from '../../utils/useAppReducer'
import HeaderMenuContainer from './HeaderMenuContainer'

import EmbedHeader from './EmbedHeader'
import PrintHeader from './PrintHeader'

const style = homePage => css`
  ${styles.HeaderWrapperStyle} {
    ${homePage &&
      css`
        @media screen and ${breakpoint('min-width', 'laptopM')({
            theme: ascDefaultTheme,
          })} {
          /* The "tall" header has a position relative on the homepage only, while the smaller header has a fixed position */
          position: relative;
          margin: 0;
        }
      `}
  }
  ${styles.HeaderNavigationStyle} {
    @media screen and ${breakpoint('min-width', 'tabletM')({
        theme: ascDefaultTheme,
      })} {
      justify-content: space-between;
    }

    fieldset > ${styles.SearchBarStyle} {
      flex-grow: 1;
      max-width: 80%;

      ${styles.TextFieldStyle} {
        flex-grow: 0;
        width: 100%;
      }
    }
  }
`

const MenuDefault = props => <HeaderMenuContainer {...props} type="default" />
const MenuMobile = props => <HeaderMenuContainer {...props} type="mobile" align="right" />

const Header = ({
  homePage,
  printOrEmbedMode,
  printMode,
  embedPreviewMode,
  hasMaxWidth,
  hidePrintMode,
  hideEmbedMode,
}) => {
  const [, actions] = useAppReducer('ui')
  const setBackDrop = payload => {
    actions.setBackDrop({
      payload,
    })
  }

  if (!printOrEmbedMode) {
    return (
      <section className="styled-header" data-test="header">
        <HeaderComponent
          tall={homePage}
          title="City Data"
          homeLink="/"
          css={() => style(homePage)}
          fullWidth={!hasMaxWidth}
          navigation={
            <React.Fragment>
              <HeaderSearchContainer />
              <MenuDefault
                data-test="header-menu-default"
                showAt="laptopM"<commit_msg>Implicitly get the theme from the styled component<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { css } from '@datapunt/asc-core'
import { Header as HeaderComponent, styles, breakpoint } from '@datapunt/asc-ui'
import HeaderSearchContainer from '../../../header/containers/header-search/HeaderSearchContainer'
import { useAppReducer } from '../../utils/useAppReducer'
import HeaderMenuContainer from './HeaderMenuContainer'

import EmbedHeader from './EmbedHeader'
import PrintHeader from './PrintHeader'

const style = (theme, homePage) => css`
  ${styles.HeaderWrapperStyle} {
    ${homePage &&
      css`
        @media screen and ${breakpoint('min-width', 'laptopM')({ theme })} {
          /* The "tall" header has a position relative on the homepage only, while the smaller header has a fixed position */
          position: relative;
          margin: 0;
        }
      `}
  }
  ${styles.HeaderNavigationStyle} {
    @media screen and ${breakpoint('min-width', 'tabletM')({ theme })} {
      justify-content: space-between;
    }

    fieldset > ${styles.SearchBarStyle} {
      flex-grow: 1;
      max-width: 80%;

      ${styles.TextFieldStyle} {
        flex-grow: 0;
        width: 100%;
      }
    }
  }
`

const MenuDefault = props => <HeaderMenuContainer {...props} type="default" />
const MenuMobile = props => <HeaderMenuContainer {...props} type="mobile" align="right" />

const Header = ({
  homePage,
  printOrEmbedMode,
  printMode,
  embedPreviewMode,
  hasMaxWidth,
  hidePrintMode,
  hideEmbedMode,
}) => {
  const [, actions] = useAppReducer('ui')
  const setBackDrop = payload => {
    actions.setBackDrop({
      payload,
    })
  }

  if (!printOrEmbedMode) {
    return (
      <section className="styled-header" data-test="header">
        <HeaderComponent
          tall={homePage}
          title="City Data"
          homeLink="/"
          css={({ theme }) => style(theme, homePage)}
          fullWidth={!hasMaxWidth}
          navigation={
            <React.Fragment>
              <HeaderSearchContainer />
              <MenuDefault
                data-test="header-menu-default"
                showAt="laptopM"
{'fraction_non_alphanumeric': 0.13066785794058522, 'fraction_numerical': 0.0035738217556399374, 'mean_word_length': 2.6674856674856673, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 27, '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': '7303468', 'n_tokens_mistral': 1309, 'n_tokens_neox': 1277, 'n_words': 312}