import React, { useState } from 'react'

import { message, Modal } from 'antd'

import CheckboxSvg from 'assets/checkbox.svg'
import CheckedSvg from 'assets/checked.svg'

import NButton from 'components/NButton/NButton'
import { IGoodsListItem } from '../Material.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/NoPermission.module.scss'
export enum PayType {
  Card = 1, // 畅销卡
  Single = 2 // 单场活动
}

interface IBuyModelProps {
  visible: boolean
  goodsList: IGoodsListItem[]
  payType?: PayType
  onCloseModel: () => void // 取消
  handleCheckPay: (GoodsId: number) => void // 确认支付
}

/**
 * 付费报名弹框(畅销卡与单场活动购买)
 */
const BuyModel: React.FC<IBuyModelProps> = props => {
  const { visible, goodsList = [], payType = PayType.Card, onCloseModel, handleCheckPay } = props
  const [buyItem, setBuyItem] = useState<IGoodsListItem | null>(payType === PayType.Single ? goodsList[0] : null)
  const [isRead, setIsRead] = useState<boolean>(false) // 我已阅读并同意

  const handleBackClose = () => {
    // setBuyItem(null)
    setIsRead(false)
    onCloseModel()
  }
  // 确认支付
  const handleToPay = () => {
    // todo
    if (!buyItem) return message.error('请选择购买的卡')
    if (!isRead) return message.error('请先阅读并同意相关协议')
    handleCheckPay(buyItem?.GoodsId)
    handleBackClose()
  }

  // 选择购买哪个卡
  const handleChooseCard = (item: IGoodsListItem) => {
    setBuyItem(item)
  }
  // 我已阅读并同意
  const handleIsRead = () => {
    setIsRead(!isRead)
  }
  // 阅读协议
  const handleOpenWord = (path: string) => {
    window.open(path)
  }

  return (
    <Modal
      open={visible}
      centered={true}
      onCancel={handleBackClose}
      destroyOnClose={true}
      maskClosable={false}
      title="付费报名"
      footer={null}
    >
      <div
        className={styles['buymodel-content-wrapper']}
        style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}
      >
        {payType === PayType.Card && (
          <div className="buymodel-card-wrapper">
            {goodsList?.map(item => (
              <div
                className={`buymodel-card-item ${buyItem?.GoodsId === item.GoodsId ? 'buymodel-card-act' : ''}`}
                key={item.GoodsId}
                onClick={handleChooseCard.bind(this, item)}
              >
                <span>{item.GoodsName}</span>
                <span className="buymodel-price-current">&nbsp;¥{item.CurrentPrice}</span>
                {/* <span className="buymodel-price-undeline">&nbsp;¥{item.Price}</span> */}
              </div>
            ))}
          </div>
        )}
        {buyItem && (
          <div className="buymodel-price-text" style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}>
            <span>应付金额：</span>
            <span className="price-red">&nbsp;¥{buyItem?.CurrentPrice}&nbsp;</span>
            {/* <span className="price-undeline">¥{buyItem?.Price}</span> */}
          </div>
        )}
        <div className="buymodel-checkbox-wrapper m-t-md">
          {isRead ? (
            <img src={CheckedSvg} alt="图标" className="buymodel-icon" onClick={handleIsRead} />
          ) : (
            <img src={CheckboxSvg} alt="图标" className="buymodel-icon" onClick={handleIsRead} />
          )}

          <span>我已阅读并同意</span>
          <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/license')}>
            《研选平台服务协议》
          </span>
          <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/policy')}>
            《研选平台隐私政策》
          </span>
        </div>
      </div>
      <div className={styles['paymodel-footer-wrapper']}>
        <NButton type="white" onClick={handleBackClose} size="large" className="pay-btn m-r-md">
          取消
        </NButton>
        <NButton type="primary" onClick={handleToPay} size="large" className="pay-btn" disabled={!(buyItem && isRead)}>
          确认支付
        </NButton>
      </div>
    </Modal>
  )
}

export default BuyModel
