Header.tsx

import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ScreenType } from 'enums'
import React, { useCallback, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { setHeaderHeight } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './header.scss'

interface HeaderProps {
  /** translation key used as t('key.value') */
  desktopTitleKey: string
  displayBackArrow?: boolean
  /** additional information to put below the main header */
  children?: React.ReactNode
  backFunction?: () => void
}

const Header = ({
  desktopTitleKey,
  displayBackArrow,
  children,
  backFunction,
}: HeaderProps) => {
  const { t } = useI18n()
  const navigate = useNavigate()
  const header = useRef<HTMLDivElement>(null)
  const dispatch = useAppDispatch()
  const { screenType, headerHeight } = useAppSelector(
    state => state.ecolyo.global
  )
  const cozyBarHeight = 48

  const handleClickBack = useCallback(() => {
    if (backFunction) {
      backFunction()
    } else {
      navigate(-1)
    }
  }, [backFunction, navigate])

  const handleClickFeedbacks = () => {
    dispatch(openFeedbackModal(true))
  }

  useEffect(() => {
    const refHeight = header.current?.clientHeight || 0
    const adjustment = screenType === ScreenType.MOBILE ? cozyBarHeight : 0
    const targetHeight = refHeight - adjustment
    if (targetHeight !== headerHeight) {
      dispatch(setHeaderHeight(targetHeight))
    }
  }, [screenType, children, dispatch, headerHeight])

  return (
    <header ref={header}>
      <div className="header-top">
        <div className="header-content">
          <div className="header-content-top">
            {screenType !== ScreenType.MOBILE && displayBackArrow && (
              <StyledIconButton
                icon={BackArrowIcon}
                onClick={handleClickBack}
                aria-label={t('header.accessibility.button_back')}
                className="header-back-button"
              />
            )}
            {desktopTitleKey && (
              <div
                className={`${
                  displayBackArrow && desktopTitleKey
                    ? 'header-text-selection'
                    : 'header-text-desktop'
                } ${
                  screenType === ScreenType.MOBILE
                    ? 'text-14-normal-uppercase'
                    : 'text-22-bold'
                }`}
              >
                <span>{t(desktopTitleKey)}</span>
              </div>
            )}
            <StyledIconButton
              icon={FeedbackIcon}
              sized={40}
              onClick={handleClickFeedbacks}
              aria-label={t('header.accessibility.button_open_feedbacks')}
              className="header-feedbacks-button"
            />
          </div>
          {children}
        </div>
      </div>
      <div className="header-bar" />
    </header>
  )
}

export default Header