import React, { useEffect, useState, useRef, useImperativeHandle } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro, { useDidShow, usePageScroll, getCurrentInstance, useReady } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { useImmer } from 'use-immer'
import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage, SpChat } from '@/components'
import { TABBAR_PATH } from '@/consts'
import { classNames, styleNames, hasNavbar, isWeixin, isAlipay, isGoodsShelves, entryLaunch, isObject } from '@/utils'
import { AtBadge } from 'taro-ui'

import './index.scss'

const initialState = {
  lock: false,
  lockStyle: {},
  pageTitle: '',
  isTabBarPage: true,
  customNavigation: false,
  cusCurrentPage: 0,
  showLeftContainer: false,
  currentPath: '',
  showCustomNavigation: false,
  showNavCartIcon: false,
}

function SpPage (props, ref) {
  const $instance = getCurrentInstance()
  const [state, setState] = useImmer(initialState)
  const { cartCount = 0 } = useSelector((state) => state.cart)
  const { lock, lockStyle, pageTitle, isTabBarPage, customNavigation, cusCurrentPage, showLeftContainer, currentPath, showCustomNavigation, showNavCartIcon } = state
  const {
    className,
    children,
    renderFloat,
    renderFooter,
    scrollToTopBtn = false,
    isDefault = false,
    defaultImg = 'empty_data.png',
    renderDefault,
    loading = false,
    defaultMsg = '',
    navbar = true,
    onClickLeftIcon = null,
    navigateTheme = 'light',
    navigateMantle = false, // 自定义导航，开启滚动蒙层
    pageConfig = null,
    fixedTopContainer = null,
    isTop = false,
    isBlack = false,
    title = '', // 页面导航标题
    showNavLogo = false,
    showNavkfIcon = false,
    showNavHomeIcon = false,
    showNavSearchIcon = false,
    showLogoLoading = false,
    alwaysBackUrl = '',
    showNavBackIcon = true
  } = props
  let { renderTitle } = props
  const wrapRef = useRef(null)
  const scrollTopRef = useRef(0)
  const sys = useSelector((state) => state.sys)
  const [showToTop, setShowToTop] = useState(false)
  const [mantle, setMantle] = useState(false)
  const { colorPrimary, colorMarketing, colorAccent, rgb, appName } = sys

  const pageTheme = {
    '--color-primary': colorPrimary,
    '--color-marketing': colorMarketing,
    '--color-accent': colorAccent,
    '--color-rgb': rgb,
    '--color-dianwu-primary': '#4980FF'
  }

  useReady(() => {
    // 导购货架数据上报
    // const router = $instance.router
    // console.log('sp pages use ready:', $instance)
  })

  useEffect(() => {
    if (lock) {
      setState((draft) => {
        draft.lockStyle = {
          position: 'fixed',
          top: `-${scrollTopRef.current}px`,
          left: '0px',
          width: '100%',
          bottom: '0px'
        }
      })
    } else {
      setState((draft) => {
        draft.lockStyle = {}
      })
    }
  }, [lock])

  useEffect(() => {
    if (isWeixin || isAlipay) {
      const pages = Taro.getCurrentPages()
      const { navigationStyle } = page.config
      // customNavigation = navigationStyle === 'custom'
      // cusCurrentPage = pages.length
      setState(draft => {
        // draft.customNavigation = navigationStyle === 'custom'
        draft.customNavigation = true
        draft.cusCurrentPage = pages.length
      })
    }
  }, [])

  useEffect(() => {
    if (pageConfig) {
      const { navigateBackgroundColor } = pageConfig
      if (isAlipay) {
        my.setNavigationBar({
          backgroundColor: navigateBackgroundColor
        })
      }
    }
  }, [pageConfig])

  useDidShow(() => {
    const { page, router } = getCurrentInstance()
    const pageTitle = page?.config?.navigationBarTitleText

    const fidx = Object.values(TABBAR_PATH).findIndex(
      (v) => v == $instance.router?.path.split('?')[0]
    )
    const isTabBarPage = fidx > -1
    setState((draft) => {
      draft.currentPath = `${page?.route}`
      draft.pageTitle = pageTitle
      draft.isTabBarPage = isTabBarPage
      draft.showLeftContainer = !['/subpages/guide/index', '/pages/index'].includes(`/${page?.route}`)
      // '/subpages/member/index',
      draft.showCustomNavigation = ['/pages/cart/espier-index', '/pages/index', '/pages/category/index', '/pages/recommend/list'].includes(`/${page?.route}`)
      // draft.showCustomNavigation = true
      draft.showNavCartIcon = ['/subpages/marketing/coupon-center', '/subpages/marketing/coupon', '/pages/item/list'].includes(`/${page?.route}`)
    })

    // 导购货架分包路由，隐藏所有分享入口
    if (router.path.indexOf('/subpages/guide') > -1) {
      Taro.hideShareMenu({
        menus: ["shareAppMessage", "shareTimeline"]
      })
    }
  })

  usePageScroll((res) => {
    if (!lock) {
      scrollTopRef.current = res.scrollTop
    }

    if (navigateMantle && res.scrollTop > 0) {
      setMantle(true)
    } else {
      setMantle(false)
    }

    if (res.scrollTop > 300) {
      setShowToTop(true)
    } else {
      setShowToTop(false)
    }
  })

  const scrollToTop = () => {
    Taro.pageScrollTo({
      scrollTop: 0,
      success: () => {
        Taro.setStorageSync('scrollTop', 0)
      }
    })
  }

  useImperativeHandle(ref, () => ({
    pageLock: () => {
      setState((draft) => {
        draft.lock = true
      })
    },
    pageUnLock: () => {
      setState((draft) => {
        draft.lock = false
      })

      setTimeout(() => {
        Taro.pageScrollTo({
          scrollTop: scrollTopRef.current,
          duration: 0
        })
      }, 0)

      // console.log('scrollTopRef.current:', scrollTopRef.current)
    }
  }))

  let model = ''
  let ipx = false
  let gNavbarH = 0, gStatusBarHeight = 0, gAreaH = 0
  // let customNavigation = false
  // let cusCurrentPage = 0

  if (isWeixin || isAlipay) {
    const deviceInfo = Taro.getSystemInfoSync()
    // console.log('deviceInfo:', deviceInfo)
    model = deviceInfo.model
    ipx = model.search(/iPhone\s*X|iPhone\s*11|iPhone\s*12|iPhone\s*13|iPhone\s*14|iPhone\s*15|iPhone\s*16|iPhone\s*10/g) > -1

    const menuButton = Taro.getMenuButtonBoundingClientRect()
    const { statusBarHeight, safeArea, screenHeight } = deviceInfo
    gAreaH = (screenHeight - safeArea.bottom)
    gNavbarH = Math.floor(statusBarHeight + menuButton.height + (menuButton.top - statusBarHeight) * 2)
    gStatusBarHeight = statusBarHeight
  }

  const { page, route } = getCurrentInstance()
  const _pageTitle = page?.config?.navigationBarTitleText

  // if (isWeixin) {
  //   const pages = Taro.getCurrentPages()
  //   // const currentPage = pages[pages.length - 1]
  //   const { navigationStyle } = page.config
  //   customNavigation = navigationStyle === 'custom'
  //   cusCurrentPage = pages.length
  // }

  const CustomNavigation = () => {
    // const { page, route } = getCurrentInstance()
    let pageStyle = {}, pageTitleStyle = {}
    if (pageConfig) {
      const { navigateBackgroundColor, navigateStyle, navigateBackgroundImage, titleStyle, titleColor, titleBackgroundImage, titlePosition } = pageConfig
      // 导航颜色背景
      if (navigateStyle == '1') {
        pageStyle = {
          'background-color': "#FFF" || navigateBackgroundColor
        }
      } else {
        pageStyle = {
          'background-image': `url(${navigateBackgroundImage})`,
          'background-size': '100% 100%',
          'background-repeat': 'no-repeat',
          'background-position': 'center'
        }
      }
      // 页面标题
      if (titleStyle == '1') {
        renderTitle = <Text style={styleNames({
          color: titleColor
        })}>{appName}</Text>
      } else if (titleStyle == '2') {
        renderTitle = <SpImage src={titleBackgroundImage} height={72} mode='heightFix' />
      }
      pageTitleStyle = {
        'justify-content': titlePosition == 'left' ? 'flex-start' : 'center',
        'color': titleColor
      }

    }
    renderTitle = showCustomNavigation || showNavLogo ? <SpImage src={`member/logo-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew /> : undefined
    const navigationBarTitleText = props.navigationBarTitleText || getCurrentInstance().page?.config?.navigationBarTitleText
    return (
      <View
        className={classNames('custom-navigation', {
          'mantle': mantle,
        }, navigateTheme)}
        style={styleNames({
          // height: `${gNavbarH - gStatusBarHeight + 2}px`,
          height: `${gNavbarH}px`,
          paddingTop: `${gStatusBarHeight}px`,
          // 'padding-top': `${gStatusBarHeight}px`,
          // top: `${gStatusBarHeight - 2}px`,
          ...pageStyle,
          'background-color': isTop ? 'transparent' : 'white',
        })}
      >
        <View className="custom-status-bar" style={{ height: `${gStatusBarHeight}px` }}></View>
        {<View className='left-container'>
          {false && <View className='icon-wrap-1'>
            <Text
              className={classNames('iconfont', {
                // 'icon-home1': cusCurrentPage == 1,
                // 'icon-fanhui': cusCurrentPage != 1
                "icon-sousuo-01": true
              })}
              onClick={() => {
                if (cusCurrentPage == 1) {
                  Taro.redirectTo({
                    url: isGoodsShelves() ? '/subpages/guide/index' : '/pages/index'
                  })
                } else {
                  Taro.navigateBack()
                }
              }}
            />
          </View>}
          {/* <Image className="chazhao" src={require("@/assets/chazhao-light.png")}></Image> */}
          {showCustomNavigation ? <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list?showSearch=true' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />
            : <View className='icon-wrap'>
              {showNavBackIcon && <Text
                className={classNames('iconfont', {
                  // 'icon-home1': cusCurrentPage == 1,
                  'icon-fanhui': alwaysBackUrl ? true : cusCurrentPage != 1
                })}
                // style={{ color: isBlack ? 'white' : 'black' }}
                onClick={() => {
                  if (alwaysBackUrl) {
                    Taro.navigateTo({
                      url: alwaysBackUrl,
                    })
                    return
                  }
                  if (cusCurrentPage == 1) {
                    Taro.redirectTo({
                      url: isGoodsShelves() ? '/subpages/guide/index' : '/pages/index'
                    })
                  } else {
                    Taro.navigateBack()
                  }
                }}
              />}
              {showNavCartIcon ? cartCount > 0 ? <AtBadge value={cartCount} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge> : <SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /> : null}
              {showNavHomeIcon && <SpImage src={`cart/home.png`} onClick={() => Taro.redirectTo({ url: '/pages/index' })} height={36} mode='heightFix' isNew />}
              {showNavSearchIcon && <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list?showSearch=true' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />}
            </View>
          }
          {showNavkfIcon && <SpChat><SpImage className='icon-kf' src={`index/kf.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew /></SpChat>}
        </View>}

        {isWeixin && <View className='title-container' style={styleNames(pageTitleStyle)}>
          {renderTitle || title || navigationBarTitleText}
          {/* 吸顶区域 */}
          {fixedTopContainer}
        </View>}
        {showLeftContainer && <View className='right-container'></View>}
      </View>
    )
  }

  let pageBackground = {}
  if (pageConfig) {
    const { pageBackgroundStyle, pageBackgroundColor, pageBackgroundImage } = pageConfig

    if (pageBackgroundStyle == '1') {
      pageBackground = {
        'background-color': "#FFF" || pageBackgroundColor
      }
    } else {
      pageBackground = {
        'background-image': `url(${pageBackgroundImage})`,
        'background-size': '100% 100%',
        'background-position': 'center'
      }
    }
  }
  return (
    <View
      className={classNames('sp-page', className, {
        // 'has-navbar': hasNavbar && !isTabBarPage && navbar,
        'has-navbar': true,
        'has-footer': renderFooter,
        'has-custom-navigation': customNavigation && pageConfig,
        'ipx': ipx
      })}
      style={styleNames({
        ...pageTheme, ...lockStyle, ...pageBackground, 'padding-top': isTop ? currentPath === 'pages/index' ? 0 : `${customNavigation ? gStatusBarHeight : 0}px` : `${customNavigation ? gNavbarH : 0}px`,
        "--nav-height": `${gNavbarH}px`,
        "--status-bar-height": `${gStatusBarHeight}px`,
        "--area-bottom-height": `${gAreaH}rpx`,
      })}
      ref={wrapRef}
    >
      {hasNavbar && !isTabBarPage && navbar && (
        <SpNavBar title={pageTitle || _pageTitle} onClickLeftIcon={onClickLeftIcon} />
      )}

      {isDefault && (renderDefault || <SpNote img={defaultImg} title={defaultMsg} isUrl={true} />)}

      {/* 没有页面自动义头部配置样式，自动生成自定义导航 */}
      {customNavigation && CustomNavigation()}

      {/* {loading && <SpNote img='loading.gif' />} */}
      {loading && <SpLoading />}

      {showLogoLoading && <View className='loading-box'>
        <SpImage height={244} width={244} src='logo-load.jpg' isNew />
      </View>}



      {!isDefault && !loading && <View className='sp-page-body' style={styleNames({
        // height: `calc(100vh - ${customNavigation ? gNavbarH : 0}px - $tabbar-height - env(safe-area-inset-bottom))`,
        // 'margin-top': `${0}px`
      })}>{children}</View>}

      {/* 置底操作区 */}
      {!isDefault && renderFooter && <View className='sp-page-footer'>{renderFooter}</View>}

      {/* 浮动 */}
      {!isDefault && (
        <View className='float-container'>
          {renderFloat}
          {showToTop && scrollToTopBtn && (
            <SpFloatMenuItem onClick={scrollToTop}>
              <Text className='iconfont icon-zhiding'></Text>
            </SpFloatMenuItem>
          )}
        </View>
      )}

      <sp-wx-privacy />
    </View>
  )
}

export default React.forwardRef(SpPage)