import { Button, MovableArea, MovableView, Text, 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'
import IconFont from '@/components/iconfont/iconfont'
import { goLink } from '@/common/common'

interface param {
  children?: ReactElement | null
  orderInfo?: any
}
const MovableAreaBtn = ({ children = null, orderInfo }: param) => {
  const [screenHeight, setScreenHeight] = useState({
    customer_service_y: 0,
    code_list_y: 0,
  })
  useEffect(() => {
    Taro.nextTick(() => {
      const res = Taro.getSystemInfoSync()
      if (res.screenHeight) {
        const ratio = 750 / res.screenWidth
        setScreenHeight(() => ({ customer_service_y: res.screenHeight * ratio - 600, code_list_y: res.screenHeight * ratio - 800 }))
      }
    })
  }, [])

  const [showCode, setShowCode] = useState(false)

  return (
    <MovableArea className={styles.movableItem}>
      {children}
      <MovableView className={classnames(styles.moveBtn, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${screenHeight.customer_service_y}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>
      <View>
        {showCode && <View className={styles.mask} catchMove onClick={() => setShowCode(!showCode)}></View>}
      </View>
      <MovableView className={classnames(styles.code_list, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${screenHeight.code_list_y}rpx`}>
        {showCode && <View className={classnames(styles.code_list__card, showCode && styles['code_list--open'])}>
          <View className={styles['code_list__card--item']}>
            <IconFont name="icon-yuanshimadanyulan" size={46} />
            <Text>原始码单预览</Text>
          </View>
          <View className={styles['code_list__card--item']} onClick={() => goLink('/pages/codeList/index')}>
            <IconFont name="icon-zidingyimadanyulan" size={46} />
            <Text>自定义码单预览</Text>
          </View>
          <View className={styles['code_list__card--item']}>
            <IconFont name="icon-bianjizidingyimadan" size={46} />
            <Text>编辑自定义码单</Text>
          </View>
        </View>}
        <View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}>码单</View>
      </MovableView>
    </MovableArea>
  )
}

export default MovableAreaBtn
