import './TopNavigationBar.less'
import { ComponentType } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { TopNavigationBarStore } from '@bageventjs/taro-store'

type PageStateProps = {
  topNavigationBarStore: TopNavigationBarStore
}

interface TopNavigationBar {
  props: PageStateProps
}

@inject('topNavigationBarStore')
@observer
class TopNavigationBar extends Component {
  constructor(props) {
    super(props)
    this.props.topNavigationBarStore.constructor(props)
  }

  componentWillMount() {
    this.props.topNavigationBarStore.componentWillMount()
  }

  render() {
    const {
      topNavigationBarStore: {
        paddingTop,
        height,
        background,
        color,
        fontSize,
        fixed,
        show,
        showBackButton,
        backStyle,
        showHomeButton,
        navigationBarTextStyle,
        title,
        placeholderBg,
      },
      topNavigationBarStore,
    } = this.props

    return (
      <View
        className='top-navigation-bar-component'
        style={{
          display: show ? 'block' : 'none',
        }}
      >
        <View
          className='navigation-bar'
          style={{
            color: color,
            paddingTop: `${paddingTop}px`,
            height: `${height + paddingTop}px`,
            lineHeight: `${height}px`,
            fontSize: `${fontSize}px`,
            background: background,
            transform: `translateY(${!show ? -paddingTop - height + 'px' : 0})`,
            position: fixed ? 'fixed' : undefined,
          }}
        >
          {showBackButton && (
            <View
              className='back'
              style={{
                paddingTop: `${paddingTop}px`,
                height: `${height + paddingTop}px`,
                lineHeight: `${height + paddingTop}px`,
              }}
            >
              <View className={`style-${backStyle} ${navigationBarTextStyle}`}>
                <View
                  className='icon-fanhui icon'
                  onClick={() => topNavigationBarStore.backPage()}
                />
                {backStyle === 'normal' && <View className='split' />}
                {showHomeButton && (
                  <View
                    className='back-home icon'
                    onClick={() => topNavigationBarStore.backHomePage()}
                  >
                    {backStyle === 'simple' ? '首页' : ''}
                  </View>
                )}
              </View>
            </View>
          )}
          <View className='title'>{title}</View>
        </View>
        {fixed && show && (
          <View
            className='navigation-bar-holder'
            style={{
              background: placeholderBg,
              paddingTop: `${paddingTop}px`,
              height: `${height + paddingTop}px`,
              lineHeight: `${height}px`,
            }}
          />
        )}
      </View>
    )
  }
}

export default TopNavigationBar as ComponentType