import React, {useEffect} from 'react'
import {View, Text} from '@tarojs/components'
import {Popup} from '@nutui/nutui-react-taro'
import {Close, QrCode} from '@nutui/icons-react-taro'

export interface SimpleQRCodeModalProps {
  /** 是否显示弹窗 */
  visible: boolean
  /** 关闭弹窗回调 */
  onClose: () => void
  /** 二维码内容（礼品卡code码） */
  qrContent: string
  /** 礼品卡名称 */
  giftName?: string
  /** 礼品卡面值 */
  faceValue?: string
}

const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
                                                               visible,
                                                               onClose,
                                                               qrContent,
                                                               giftName,
                                                               faceValue
                                                             }) => {

  // const copyToClipboard = () => {
  //   if (qrContent) {
  //     Taro.setClipboardData({
  //       data: qrContent,
  //       success: () => {
  //         Taro.showToast({
  //           title: '兑换码已复制',
  //           icon: 'success'
  //         })
  //       }
  //     })
  //   }
  // }

  useEffect(() => {

  }, [])

  return (
    <Popup
      visible={visible}
      position="center"
      closeable
      closeIcon={<Close/>}
      onClose={onClose}
      style={{
        width: '90%'
      }}
    >
      <View className="p-6">
        {/* 标题 */}
        <View className="mb-4">
          <Text className="text-lg font-bold">核销码</Text>
        </View>

        {/* 礼品卡信息 */}
        {(giftName || faceValue) && (
          <View className="bg-gray-50 rounded-lg p-3 mb-4 hidden">
            {giftName && (
              <Text className="font-medium text-center mb-1">
                {giftName}
              </Text>
            )}
            {faceValue && (
              <Text className="text-lg font-bold text-red-500 text-center">
                ¥{faceValue}
              </Text>
            )}
          </View>
        )}

        {/* 二维码区域 */}
        <View className="text-center mb-4">
          <View className="p-4 bg-white border border-gray-200 rounded-lg">
            {qrContent ? (
              <View className={'flex flex-col justify-center'}>
                <img
                  src={`https://cms-api.websoft.top/api/qr-code/create-encrypted-qr-image?size=300x300&expireMinutes=60&businessType=gift&data=${encodeURIComponent(qrContent)}`}
                  alt="二维码"
                  style={{width: '200px', height: '200px'}}
                  className="mx-auto"
                />
                <Text className="text-sm text-gray-400 mt-1 px-2">
                  请向商家出示此二维码
                </Text>
              </View>
            ) : (
              <View className="bg-gray-100 rounded flex items-center justify-center mx-auto"
                    style={{width: '200px', height: '200px'}}>
                <View className="text-center">
                  <QrCode size="48" className="text-gray-400 mb-2"/>
                  <Text className="text-gray-500 text-sm">生成中...</Text>
                </View>
              </View>
            )}
          </View>
        </View>

      </View>
    </Popup>
  )
}

export default SimpleQRCodeModal