import React, { useEffect } from 'react';
import IconFont from '../IconFont';
import styles from './index.less';

const Header=(props)=>{
  const {
    visible=true,
    className='',
    title='标题',
    subTitle='',
    leftLabel='',
    rightLabel='',
    left=<IconFont className={styles.leftIcon} icon='arrowBack' />,
    right='',
    syncDocumentTitle=false
  } = props;

  // 同步更新网页标题
  useEffect(()=>{
    if(syncDocumentTitle){
      document.title= title;
    }
  },[title])
  const onLeft=()=>{
    window.history.back();
  }
  const onLeftLabel=()=>{
    if(props.onLeftLabel){props.onLeftLabel()}
  }
  const onRight=()=>{
    if(props.onRight){props.onRight()}
  }
  const onRightLabel=()=>{
    if(props.onRightLabel){props.onRightLabel()}
  }
  const onTitle=()=>{
    if(props.onTitle){props.onTitle()}
  }
  return (
    <section className={`${styles.header} ${className}`} data-visible={visible}>
      <hgroup className={styles.group}>
        {left&&(<section className={styles.left} onClick={onLeft}>{left}</section>)}
        {leftLabel&&<span className={styles.leftLabel} onClick={onLeftLabel}>{leftLabel}</span>}
      </hgroup>
      <section className={styles.center}>
        {title&&<span onClick={onTitle}>{title}</span>}
        {subTitle&&<span>{subTitle}</span>}
      </section>
      <hgroup className={styles.group}>
        {rightLabel&&<span className={styles.rightLabel} onClick={onRightLabel}>{rightLabel}</span>}
        {right&&(<section className={styles.right} onClick={onRight}>{right}</section>)}
      </hgroup>
      
    </section>
  )
}
export default Header;