import { Button, Image, MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import Customer from '../customer'
import CodeSelect from '../codeSelect'
import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common'
import { formatImgUrl } from '@/common/fotmat'

type ShowStatus = 'shop'|'customer'|'order'|'code'
interface param {
  children?: ReactElement | null
  onShopClick?: () => void
  showList?: ShowStatus[]
  messageTitle?: string
  messagePath?: string
  showCart?: false|true
  orderObj?: any
  orderInfo?: any
}
const MoveBtn = ({ orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false, orderInfo = {} }: param) => {
  const userInfo = useSelector(state => state.userInfo)
  // 获取购物车数据数量
  const { getShopCount, commonData } = useCommonData()

  const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number; code?: number }>({
    shop: 0,
    customer: 0,
    order: 0,
  })
  const [showMoveBtn, setShowMoveBtn] = useState(false)
  const screenWidthRef = useRef(0)
  useEffect(() => {
    Taro.nextTick(() => {
      const res = Taro.getSystemInfoSync()
      if (res.screenHeight) {
        const ratio = 750 / res.screenWidth
        const num = res.screenHeight * ratio
        setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700, code: num - 820 }))
        screenWidthRef.current = res.screenWidth / 2
      }
      setShowMoveBtn(true)
    })
  }, [])

  useDidShow(() => {
    getShopCount()
  })

  const onShow = (val: ShowStatus) => {
    if (showList.length <= 0) { return true }
    return showList.includes(val)
  }

  const onPhone = () => {
    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
    Taro.makePhoneCall({
      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
    })
  }

  const [customer_service_show, set_customer_service_show] = useState(false)
  const customerClose = () => {
    set_customer_service_show(false)
  }

  return (
    <MovableArea className={styles.movableItem}>
      {children}
      {onShow('shop') && <MovableView
        onClick={onShopClick}
        className={styles.moveBtn}
        direction="all"
        inertia
        x="630rpx"
        y={`${screenHeight.shop}rpx`}
      >
        <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>}
      {onShow('order') && <MovableView
        onClick={() => set_customer_service_show(true)}
        className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
        direction="all"
        inertia
        x="630rpx"
        y={`${screenHeight.order}rpx`}
      >
        <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
      </MovableView>}
      {onShow('customer') && <MovableView
        onClick={onPhone}
        className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
        direction="all"
        inertia
        x="630rpx"
        y={`${screenHeight.customer}rpx`}
      >
        <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
      </MovableView>}
      {onShow('code') && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} custom_print_id={orderInfo?.custom_print_id} sale_order_id={orderInfo?.id} />}
      <Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} />
    </MovableArea>
  )
}

export default MoveBtn