import { PutAlterUname } from '@/api/Meeting';
import styles from '@/components/UserName/index.module.scss'
import { storage } from '@/utils';
import { Button, Input, message, Modal } from 'antd';
import { useState, useImperativeHandle, forwardRef } from "react";
const UserName = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: (data: any) => {
      setInfo(data)
      setUserNameModal(true)
    }
  }))
  const [userNameModal, setUserNameModal] = useState(false);
  const [info, setInfo] = useState({
    userName: '',
    uid: ''
  });
  return (
    <>
      <Modal
        title="修改用户名"
        open={userNameModal}
        footer={null}
        destroyOnClose={true}
        onCancel={() => setUserNameModal(false)}
        centered
        width={'300px'}
      >
        <div className={styles.userNameModal}>
          <div className={styles.userNameModalContent}>
            <Input
              placeholder="请输入用户名称"
              style={{ width: '100%' }}
              value={info.userName}
              onChange={(e) => {
                setInfo({
                  ...info,
                  userName: e.target.value
                })
              }}
            />
          </div>
          <div className={styles.userNameModalFooter}>
            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', marginRight: '14px' }}
              onClick={() => setUserNameModal(false)}>关闭</Button>
            <Button type="primary"
              onClick={async () => {
                const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
                if (info.userName) {
                  PutAlterUname({
                    nickName: info.userName,
                    roomNum: stateInfo.channelId,
                    uid: info.uid,
                  }).then((res) => {
                    if (res.code === 200) {
                      message.success('修改成功')
                      setUserNameModal(false)
                    }
                  })
                } else {
                  message.error('请输入用户名')
                }
              }}
              className='m-ant-btn'>
              修改
            </Button>
          </div>
        </div>
      </Modal>
    </>
  )
})

export default UserName