import { Button, MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

interface param {
  children?: ReactElement | null
  orderInfo?: any
}
const MovableAreaBtn = ({ children = null, orderInfo }: param) => {
  const [screenHeight, setScreenHeight] = useState(0)
  const screenWidthRef = useRef(0)
  useLayoutEffect(() => {
    const res = Taro.getSystemInfoSync()
    if (res.screenHeight) {
      const ratio = 750 / res.screenWidth
      setScreenHeight(res.screenHeight * ratio - 600)
      screenWidthRef.current = res.screenWidth / 2
    }
  })

  return (
    <MovableArea className={styles.movableItem}>
      {children}
      <MovableView className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`}>
        <View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
          <Button
            className={styles.wxBtn}
            openType="contact"
            sendMessageTitle={orderInfo?.order_no}
            showMessageCard
            sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
          ></Button>
        </View>
      </MovableView>
    </MovableArea>
  )
}

export default MovableAreaBtn
