
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import classNames from 'classnames'
import './style.scss'

export default (props) => {
  const { visible = false, onClose = () => {} } = props
  const [style, setStyle] = useState({ right: '50px' })

  useEffect(() => {
    Taro.nextTick(() => {
      // https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
      const bound = Taro.getMenuButtonBoundingClientRect()

      Taro.getStorage({
        key: 'systemInfo',
        success: (res) => {
          const { screenWidth } = res.data
          // 胶囊右边距
          const marginRight = screenWidth - bound.right
          // 提示的右边距
          const right = bound.width / 2 + marginRight
          //
          setStyle({ right: `${right}px` })
        }
      }) || {};

      // 需要依据 bound 来调整位置
    })
  }, [])

  return (
    <view className={classNames('components', 'ShareToCircle', { show: visible })} onClick={onClose}>
      <view style={style}>
        <text>从这里“分享到朋友圈”~</text>
        <text className='iconfont icon-guanbi1' onClick={onClose}></text>
      </view>
    </view>
  )
}
