import { MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import type { ReactElement } from 'react'
import { useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks'

interface param {
  children?: ReactElement|null
  onClick?: () => void
}
const MoveBtn = ({ children = null, onClick }: param) => {
  // 获取购物车数据数量
  const { getShopCount, commonData } = useCommonData()

  const [screenHeight, setScreenHeight] = useState(0)
  const [showMoveBtn, setShowMoveBtn] = useState(false)
  const screenWidthRef = useRef(0)
  useReady(() => {
    const res = Taro.getSystemInfoSync()
    if (res.screenHeight) {
      const ratio = 750 / res.screenWidth
      setScreenHeight(res.screenHeight * ratio - 460)
      screenWidthRef.current = res.screenWidth / 2
    }
    setShowMoveBtn(true)
  })

  useEffect(() => {
    getShopCount()
  }, [])

  const dragEnd = (e) => {

  }

  return (
    <MovableArea className={styles.movableItem}>
      {children}
      {showMoveBtn && <MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`} onTouchEnd={e => dragEnd(e)}>
        <View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)} ></View>
        {(commonData.shopCount > 0) && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
      </MovableView>}
    </MovableArea>
  )
}
export default MoveBtn