import React, {useState, useEffect} from 'react'
import Taro from '@tarojs/taro'
import {Dimensions} from 'react-native';


interface INavInfo {
  statusBarHeight: number
  optionsBarHeight: number
  titleBarHeight: number
  titelBarWidth: number
  tabBarHeight: number
  appHeaderHeight: number
  marginSides: number
  capsuleWidth: number
  capsuleHeight:number
  capsuleLeft: number
  screenHeight: number
  screenWidth: number
  windowHeight: number
  windowWidth: number
  top: number
}

function useNavTabInfo(): INavInfo {
  const [navInfo, setNavInfo] = useState({
    statusBarHeight: 0,
    optionsBarHeight: 0,
    titleBarHeight: 0,
    titelBarWidth: 0,
    tabBarHeight: 0,
    appHeaderHeight: 0,
    marginSides: 0,
    capsuleWidth: 0,
    capsuleHeight: 0,
    capsuleLeft: 0,
    screenHeight: 0,
    screenWidth: 0,
    windowHeight: 0,
    windowWidth: 0,
    top: 0,
  })

  useEffect(() => {

    const {height} = Dimensions.get('window')
    const { statusBarHeight, safeArea, screenWidth, screenHeight, platform, windowWidth } = Taro.getSystemInfoSync()
    
    
    // 计算标题栏高度
    let titleBarHeight = 48
    let tabBarHeight = 48
    
    // 计算导航栏高度
    let appHeaderHeight = statusBarHeight + titleBarHeight //
    
    //边距，两边的
    let marginSides = 10
    //标题宽度
    let titelBarWidth = screenWidth - marginSides * 2
    //去掉导航栏，屏幕剩余的高度

    setNavInfo({
      statusBarHeight: statusBarHeight, //状态栏高度
      optionsBarHeight: height - safeArea.bottom, // 底部操作控件高度
      titleBarHeight: titleBarHeight,  //标题栏高度
      titelBarWidth: titelBarWidth,  //标题栏宽度
      tabBarHeight: tabBarHeight,
      appHeaderHeight: appHeaderHeight, //整个导航栏高度
      marginSides: marginSides, //侧边距
      capsuleWidth: 0, //胶囊宽度
      capsuleHeight: 0, //胶囊高度
      capsuleLeft: 0,
      screenHeight: screenHeight,
      screenWidth: screenWidth,
      windowHeight: height, // 
      windowWidth: windowWidth,
      top: 0,
    })
  }, [])
  return navInfo
}


export default useNavTabInfo