import {Image, View} from "@tarojs/components";
import React, {CSSProperties, FC, ReactNode, useMemo} from "react";
import styles from './navigationBar.module.scss'
import Taro from "@tarojs/taro";
import leftArrow from '@/static/img/leftArrow.png'

interface Props {
  // 文本
  text?: string | ReactNode
  children?: ReactNode | ReactNode[]
  // 	左边节点
  leftNode?: string | ReactNode | ReactNode[]
  // 字体颜色
  color?: string
  // 背景颜色
  backgroundColor?: string
  // 取消返回按钮
  cancelBack?: boolean
  // 跟随页面滚动
  inherit?: boolean
  className?: string
  style?: CSSProperties
}

const NavigationBar: FC<Props> = (props) => {
  const globalData = Taro.getApp().globalData
  const navigationBarStyle = useMemo((): React.CSSProperties => ({
    background: props.backgroundColor,
    position: props.inherit ? 'inherit' : "sticky",
    paddingTop: globalData.statusBarHeight + 'px',
    height: globalData.textBarHeight + globalData.statusBarHeight + 'px',
    boxSizing: 'border-box',
    ...props.style
  }), [props])


  const navigationTextStyle = useMemo((): React.CSSProperties => ({
    color: props.color,
    height: globalData.textBarHeight + 'px',
  }), [props])

  return (
    <View className={`${props.className} ${styles.navigation}`} style={navigationBarStyle}>
      <View style={navigationTextStyle} className={styles.leftNode}>
        {
          !props.cancelBack && <View className="flex flex-column justify-center align-center" style={{
            width: globalData.textBarHeight + 'px',
            height: globalData.textBarHeight + 'px',
          }} onClick={() => Taro.navigateBack()}>
            <Image src={leftArrow} mode='aspectFill' className={styles.arrow}/>
          </View>
        }
        {props.leftNode}
      </View>
      <View style={navigationTextStyle} className={styles.text}>{props.children || props.text}</View>
    </View>
  )
}

export default NavigationBar
