import React, { useEffect, useRef, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
import { withClient, Client } from 'cozy-client'
import { ScreenType } from 'enum/screen.enum'
import { AppContext } from 'components/Contexts/AppContextProvider'
import useInstanceSettings from 'components/Hooks/userInstanceSettings'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'

interface HeaderProps {
  textKey?: string
  desktopTitleKey?: string
  displayBackArrow?: boolean
  children?: React.ReactNode
  setHeaderHeight(height: number): void
  client: Client
  t: Function
}

const Header: React.FC<HeaderProps> = ({
  textKey,
  desktopTitleKey,
  displayBackArrow,
  children,
  setHeaderHeight,
  client,
  t,
}: HeaderProps) => {
  const header = useRef(null)
  const { screenType } = useContext(AppContext)
  const { data: instanceSettings } = useInstanceSettings(client)
  const cozyBarHeight = 48
  const headerBottomHeight = 8

  const handleClickBack = () => {
    history.goBack()
  }

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

  return (
    <div className="header" ref={header}>
      <div className="header-top">
        <div className="header-content">
          {textKey && (
            <div className="header-text text-14-normal-uppercase">
              {t(textKey)}
            </div>
          )}
          {desktopTitleKey && (
            <div className="header-text-desktop text-22-normal">
              {displayBackArrow && (
                <StyledIconButton
                  className="cv-button"
                  icon={BackArrowIcon}
                  onClick={() => handleClickBack()}
                />
              )}
              {t(desktopTitleKey)}
            </div>
          )}
          {children}
        </div>
      </div>
      <div className="header-bar"></div>
    </div>
  )
}

export default translate()(withClient(Header))