import { Image, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { buildPublicQrImageUrl } from '@/lib/qrImage'

export default function WeixinQrImage ({ url }: { url: string }) {
  const [src, setSrc] = useState('')

  useEffect(() => {
    let cancelled = false
    setSrc('')
    const remote = buildPublicQrImageUrl(url)
    if (!remote) return

    if (Taro.getEnv() !== Taro.ENV_TYPE.WEAPP) {
      setSrc(remote)
      return
    }

    Taro.downloadFile({
      url: remote,
      success (res) {
        if (cancelled) return
        if (res.statusCode === 200 && res.tempFilePath) {
          setSrc(res.tempFilePath)
          return
        }
        Taro.showToast({ title: '二维码加载失败', icon: 'none' })
      },
      fail () {
        if (!cancelled) {
          Taro.showToast({ title: '二维码加载失败', icon: 'none' })
        }
      },
    })

    return () => {
      cancelled = true
    }
  }, [url])

  return (
    <View className='contact-qrcode'>
      {src ? (
        <Image
          className='contact-qrcode__image'
          src={src}
          showMenuByLongpress
          onLongPress={() => Taro.previewImage({ current: src, urls: [src] })}
        />
      ) : (
        <View className='contact-qrcode__image' />
      )}
      <Text className='contact-qrcode__hint'>截图并使用微信扫码识别添加客服微信</Text>
    </View>
  )
}