'use client'
import {DialogClose, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
import {Button} from '@/components/ui/button'
import {Loader} from 'lucide-react'
import {useState} from 'react'
import Image from 'next/image'
import {PaymentModalProps} from './payment-modal'

export function DesktopPayment(props: PaymentModalProps) {
  const [loading, setLoading] = useState(false)

  const onSubmit = async () => {
    setLoading(true)
    await props.onConfirm(true)
    setLoading(false)
  }

  return (
    <DialogContent>
      <DialogHeader>
        <DialogTitle className="flex gap-2 items-center">
          {props.decoration.icon ? (
            <Image
              src={props.decoration.icon}
              alt={props.decoration.text}
              width={24}
              height={24}
              className="rounded-md"
            />
          ) : (
            <div className="w-6 h-6 bg-gray-200 rounded-full"/>
          )}
          <span>{props.decoration.text}</span>
        </DialogTitle>
      </DialogHeader>

      <div className="flex flex-col items-center gap-4">
        <Image
          src={props.pay_url}
          width={208}
          height={208}
          alt="二维码"
        />
        <p className="text-sm text-gray-600">
          请使用
          {props.decoration.text}
          扫码支付
        </p>

        <div className="w-full text-center space-y-2">
          <p className="text-sm font-medium">
            支付金额:
            {' '}
            <span className="text-accent">
              ¥
              {props.amount?.toFixed(2) || '0.00'}
            </span>
          </p>
          <p className="text-xs text-gray-500">
            订单号:
            {props.inner_no}
          </p>
        </div>

        <div className="flex gap-4 w-full justify-center">
          <Button onClick={onSubmit}>
            {loading && <Loader className="animate-spin mr-2"/>}
            已完成支付
          </Button>
          <DialogClose asChild>
            <Button theme="outline" onClick={() => props.onClose?.()}>
              关闭
            </Button>
          </DialogClose>
        </div>
      </div>
    </DialogContent>
  )
}