import React, { useState } from 'react';
import Modal from 'react-modal';
import * as coursesAPI from '../../apis/coursesAPI';
import QRCode from 'qrcode.react';

const customStyles = {
  content: {
    maxWidth: '420px',
    maxHeight: '330px',
    margin: 'auto',
    borderRadius: '0.5rem',
    padding: '2rem',
  },
};

function PaymentModal({ isOpen, closeModal, course }) {
  // 定义一个状态来控制是否显示支付二维码
  const [isShowingQRCode, setIsShowingQRCode] = useState(false);
  // 定义一个状态来保存支付二维码内容
  const [qrCodeValue, setQRCodeValue] = useState('');

  const handleCloseQRCodeModal = () => {
    setIsShowingQRCode(false);
  };

  const buyCourse = async (code, type) => {
    const buyInfo = await coursesAPI.buyCourse(code, type);

    const { PayUrl } = buyInfo;
    window.open(PayUrl, '_blank');
    // 设置支付二维码内容和显示支付二维码的状态
    // setQRCodeValue(PayUrl); // TODO: 替换为合适的支付二维码内容
    // setIsShowingQRCode(true);
  };
  return (
    <div className='PaymentModal'>
      <Modal
        isOpen={isOpen}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel='支付选择'>
        <button
          onClick={closeModal}
          className='absolute top-2 right-4 text-xl text-gray-500 hover:text-gray-700'>
          &times;
        </button>
        <h2 className='text-2xl font-bold mb-6'>请选择支付方式</h2>
        <div className='flex justify-around'>
          {' '}
          {/* 使用 flexbox 排列按钮 */}
          {/* 支付宝按钮 */}
          <button
            className='bg-blue-500 w-2/5 py-3 rounded-xl mr-2 text-white hover:bg-blue-600 flex flex-col items-center justify-between'
            onClick={() => buyCourse(course.Code, 0)}>
            <div className='flex-1'>
              <img
                src={process.env.PUBLIC_URL + '/zfb.svg'}
                alt='支付宝'
                className='w-12 h-14 mt-3 bg-blend-color'
              />
            </div>
            <p className='pb-2'>支付宝</p>
          </button>
          {/* 微信按钮 */}
          <button
            className='bg-green-500 w-2/5 py-3 rounded-xl ml-2 text-white hover:bg-green-600 flex flex-col items-center justify-between'
            onClick={async () => await coursesAPI.buyCourse(course.Code, 2)}>
            <div className='flex-1'>
              <img
                src={process.env.PUBLIC_URL + '/wx.svg'}
                alt='微信'
                className='w-12 h-14 mt-3'
              />
            </div>
            <p className='pb-2'>微信</p>
          </button>
        </div>
        <button
          onClick={closeModal}
          className='text-center w-full py-3 text-blue-600 hover:text-blue-800 mt-6'>
          取消
        </button>
        {/* 支付二维码弹窗 */}
        <QRCodeModal
          isOpen={isShowingQRCode}
          onRequestClose={handleCloseQRCodeModal}
          qrCodeValue={qrCodeValue}
        />
      </Modal>
    </div>
  );
}

const QRCodeModal = ({ isOpen, onRequestClose, qrCodeValue }) => {
  const handleCloseModal = () => {
    onRequestClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={handleCloseModal}
      style={customStyles}
      contentLabel='支付二维码'>
      <div className='text-center mb-4'>
        <p className='text-sm text-gray-600'>请使用支付宝扫描二维码完成支付</p>
      </div>
      <div className='flex justify-center mb-4'>
        <QRCode value={qrCodeValue} size={150} />
      </div>
      <button
        onClick={handleCloseModal}
        className='text-center w-full py-3 text-blue-600 hover:text-blue-800'>
        关闭
      </button>
    </Modal>
  );
};

export default PaymentModal;
Modal.setAppElement('#root');
