import { MovableArea, MovableView, View } from "@tarojs/components"
import Taro, { useReady } from "@tarojs/taro"
import { ReactElement, 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";

type param = {
    children?: ReactElement|null,
    onClick?: () => void
}
export default ({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) {
            let 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={true} 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>
    )
}