import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A61_APIgetCode, A61_APIsave } from '@/store/action/A6_1codeSuo'
import { MessageFu } from '@/utils/message'

type Props = {
  type: 'live' | 'neighbour'
  closeFu: () => void
  addTableFu: () => void
}

function A61Mcode({ type, closeFu, addTableFu }: Props) {
  const [info, setInfo] = useState({ code: '', invitationName: '' })

  // 获取随机邀请码
  const getCode = useCallback(async () => {
    const res = await A61_APIgetCode()
    if (res.code === 0) {
      setInfo({ code: res.data, invitationName: '' })
    }
  }, [])

  useEffect(() => {
    getCode()
  }, [getCode])

  // 点击提交
  const btnOk = useCallback(async () => {
    const obj = {
      code: info.code,
      invitationName: info.invitationName,
      type
    }
    const res = await A61_APIsave(obj)
    if (res.code === 0) {
      MessageFu.success('生成邀请码成功!')
      addTableFu()
      closeFu()
    }
  }, [addTableFu, closeFu, info.code, info.invitationName, type])

  return (
    <Modal
      wrapClassName={styles.A61Mcode}
      open={true}
      title='生成邀请码'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A61Mrow'>
        <div className='A61Mrow1'>邀请码：</div>
        <div className='A61Mrow2'>
          <div className='A61Mrow2Txt'>{info.code}</div>
        </div>
      </div>

      <div className='A61Mrow'>
        <div className='A61Mrow1'>邀请对象：</div>
        <div className='A61Mrow2'>
          <Input
            maxLength={50}
            showCount
            placeholder='请填入邀请对象信息'
            value={info.invitationName}
            onChange={e => setInfo({ code: info.code, invitationName: e.target.value })}
          />
        </div>
      </div>

      <div className='A61Mbtn'>
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        &emsp;
        <Button type='primary' onClick={btnOk}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

const MemoA61Mcode = React.memo(A61Mcode)

export default MemoA61Mcode
