import React 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'
  //         })
  //       }
  //     })
  //   }
  // }


  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>
          <Text className="text-sm text-gray-400 mt-1 px-2">
            请向商家出示此二维码
          </Text>
        </View>

        {/* 礼品卡信息 */}
        {(giftName || faceValue) && (
          <View className="bg-gray-50 rounded-lg p-3 mb-4">
            {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 ? (
              <img
                src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrContent)}`}
                alt="二维码"
                style={{width: '200px', height: '200px'}}
                className="mx-auto"
              />
            ) : (
              <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
