Header.tsx

import IconButton from '@material-ui/core/IconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { ScreenType } from 'enum/screen.enum'
import React, { useCallback, useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { AppStore } from 'store'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
import './header.scss'

interface HeaderProps {
  textKey?: string
  desktopTitleKey?: string
  displayBackArrow?: boolean
  children?: React.ReactNode
  setHeaderHeight(height: number): void
  isNotKey?: boolean
  backFunction?: () => void
}

const Header: React.FC<HeaderProps> = ({
  textKey,
  desktopTitleKey,
  displayBackArrow,
  children,
  setHeaderHeight,
  isNotKey,
  backFunction,
}: HeaderProps) => {
  const { t } = useI18n()
  const history = useHistory()
  const header = useRef(null)
  const dispatch = useDispatch()
  const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)

  const cozyBarHeight = 48

  const handleClickBack = useCallback(() => {
    if (backFunction) {
      backFunction()
    } else {
      history.goBack()
    }
  }, [backFunction, history])

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

  useEffect(() => {
    if (screenType === ScreenType.MOBILE) {
      setHeaderHeight(
        header.current ? header.current.clientHeight - cozyBarHeight : 0
      )
    } else {
      setHeaderHeight(header.current ? header.current.clientHeight : 0)
    }
  }, [screenType, children, setHeaderHeight])

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

export default Header