import Taro, { useDidHide, useLoad } from '@tarojs/taro'
import { useState } from 'react'
import { getTopSafeHeight } from '@/hooks/useGetCustomClient'
import { View, Text, Image } from '@tarojs/components'
import './index.less'

function CustomPage() {
  const styleSheet = {
    page: {
      background: '#006FE3',
      color: '#fff',
    },
    title: {
      fontSize: '69rpx',
      fontWeight: '',
      marginTop: '104rpx',
      marginBottom: '54rpx'
    },
    content: {
      width: '486rpx',
      height: '486rpx'
    },
    guide: {
      marginTop: '38rpx',
    }
  }

  const adInfo = {
    title: '添加官方客服微信',
    image: 'https://img.jianyufu.com/uploadfile/20231208/591615452983762944.jpg'
  }

  const [isCustom, setIsCustom] = useState(false)
  const [statusBarHeight, setStatusBarHeight] = useState(0)
  const [navBarStyle, setNavBarStyle] = useState({ height: '0px', marginLeft: 'px' })
  useLoad(() => {
    const spaceHeight = getTopSafeHeight()
    const { screenHeight, windowHeight } = Taro.getSystemInfoSync()
    setIsCustom(spaceHeight + windowHeight > screenHeight)

    // 状态栏 刘海屏
    const systemInfo = Taro.getSystemInfoSync()
    const { statusBarHeight = 0 } = systemInfo
    setStatusBarHeight(statusBarHeight)
    // 胶囊信息
    const menuInfo = Taro.getMenuButtonBoundingClientRect()
    // 导航高度固定 44px
    let navigationBarHeight = (menuInfo.top - statusBarHeight) * 2 + menuInfo.height

    setNavBarStyle({
      height: `${ Math.min(44, navigationBarHeight)}px`,
      marginLeft: `${(systemInfo.screenWidth - menuInfo.right) * 2}px`
    })
  })

  useDidHide(() => {
    console.log('hide')
  })

  function navigateBack() {
    wx.navigateBack()
  }

  return (
    <View className='custom-page'>
      {/* 状态栏 */}
      {isCustom && <View className='status-bar' style={{ height: `${statusBarHeight}px`}}></View>}
      {/* 导航栏 */}
      {isCustom && <View className='nav-bar' style={navBarStyle} >
        <View className='left-icon' onClick={navigateBack}></View>  
      </View>}
      {/* 页面 */}
      <Page styleSheet={styleSheet} adInfo={adInfo} />
    </View>
  )
}

function Page({ styleSheet, adInfo }) {
  const pageStyle = {
    width: '100vw',
    height: `calc(100vh - ${getTopSafeHeight()}px)`,
    background: styleSheet.page.background,
    color: styleSheet.page.color
  }

  function onLongPress(evt) {
    console.log(evt)
  }

  return (
    <View className='page-content' style={pageStyle}>
      <View className='page-title' style={styleSheet.title}>
        <Text>{adInfo.title}</Text>
      </View>
      <View className='page-content' style={styleSheet.content}>
        <Image className='page-image' src={adInfo.image} 	showMenuByLongpress onLongPress={onLongPress}/>
      </View>
      <View className='page-guide' style={styleSheet.guide}>

        <View className='guide-title'>添加方法</View>
        <View className='guide-content'>
          <Text>1、长按上面图片3秒</Text>
          <Text>2、点击识别图中二维码</Text>
        </View>
      </View>
    </View>
  )
}

export default CustomPage
