import Taro from '@tarojs/taro'
import { View, Text, Block } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsNavTitleProps } from 'types/nav-title'

/**
 * 自定义导航组件
 */
export default class CtsNavTitle extends CtsComponent<CtsNavTitleProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsNavTitleProps
  public static propTypes: InferProps<CtsNavTitleProps>

  public constructor(props: CtsNavTitleProps) { 
    super(props)
    this.state = {}
  }

  public render(): JSX.Element {
    const { className, title, bgColor, navColor, isNavReturnRender, returnClick } = this.props
    let systemInfo = Taro.getSystemInfoSync()

    let marginTop: string = Taro.pxTransform(systemInfo.statusBarHeight * 2)
    
    // android系统顶部高度增加4rpx，保持标题上下居中
    if (systemInfo.platform === 'android') { 
      marginTop = Taro.pxTransform(systemInfo.statusBarHeight * 2 + 8)
    }

    // console.log(systemInfo)
    // console.log('顶部高度', marginTop)

    return (
      <View className={classNames('cts-nav-title', className)}>
        <View className='nav-title' style={{ backgroundColor: bgColor, color: navColor, marginTop }}>
          <View className='nav-return'>
            {
              isNavReturnRender ?
                <Block>
                  {this.props.renderNavReturn}
                </Block>
                :
                <Text className='iconfont iconRectangle1' style={{ color: navColor }} onClick={returnClick}></Text>
            }
          </View>
          <View className='title'>{title}</View>
        </View>
        <View className='nav-place' style={{ backgroundColor: bgColor, paddingTop: Taro.pxTransform(systemInfo.statusBarHeight * systemInfo.pixelRatio + 80) }}></View>
      </View>
    )
  }
}

CtsNavTitle.defaultProps = {
  title: '',
  bgColor: '#FFFFFF',
  navColor: '#333333',
  isNavReturnRender: false,
  renderNavReturn: null,
  returnClick() { 
    Taro.navigateBack({ delta: 1 })
  }
}

CtsNavTitle.propTypes = {
  title: PropTypes.string,
  bgColor: PropTypes.string,
  navColor: PropTypes.string,
  isNavReturnRender: PropTypes.bool,
  renderNavReturn: PropTypes.element,
  returnClick: PropTypes.func
}