import { Image, MovableArea, MovableView } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks'
import { BUSINESS_MANAGER, BUSINESS_MANAGER_PHONE } from '@/common/constant'

type ShowStatus = 'businessManager'
interface param {
  children?: React.ReactNode
  showList?: ShowStatus[]
  onClick?: () => void
}
const MoveBtn = ({ children = null, onClick, showList = [] }: param) => {
  const onShow = (val: ShowStatus) => {
    if (showList.length <= 0) { return true }
    return showList.includes(val)
  }

  const [screenHeight, setScreenHeight] = useState<{ shop?: number; businessManager?: number; order?: number; code?: number }>({
    shop: 0,
    businessManager: 0,
    order: 0,
  })

  const screenWidthRef = useRef(0)
  useReady(() => {
    Taro.nextTick(() => {
      const res = Taro.getSystemInfoSync()
      if (res.screenHeight) {
        const ratio = 750 / res.screenWidth
        const num = res.screenHeight * ratio
        setScreenHeight(() => ({ shop: num - 460, businessManager: num - 580, order: num - 700, code: num - 820 }))
        screenWidthRef.current = res.screenWidth / 2
      }
    })
  })

  const onClickBusinessManager = () => {
    Taro.makePhoneCall({
      phoneNumber: BUSINESS_MANAGER_PHONE,
    })
  }

  return (
    <MovableArea className={styles.movableItem}>
      {children}
      {onShow('businessManager') && <MovableView onClick={onClickBusinessManager} className={classnames(styles.moveBtn, styles.no_bg_moveBtn)} direction="all" inertia x="630rpx" y={`${screenHeight.businessManager}rpx`}>
        <Image mode="aspectFit" src={BUSINESS_MANAGER} />
      </MovableView>}
    </MovableArea>
  )
}
export default MoveBtn
