import styles from '@/components/EquipmentManagement/index.module.scss'
import { getKeyOpenChildWindow } from '@/utils/package/public';
import { Button, Modal, Select, Slider, message } from 'antd';
import { useState, useImperativeHandle, forwardRef } from "react";
const EquipmentManagement = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: async (uid: string, userName: string) => {
      setCallerUid(uid)
      setDeviceInfo({})
      let isOpen = await getKeyOpenChildWindow('shareScreenWindow')
      if (isOpen) {
        props.getDriver?.(uid)
      } else {
        await window.electron.onInvoke('getDrivers', {
          uid
        })
      }
      setUserName(userName)
      setEquipmentManagementModal(true)
    },
    setData: (data: any) => {
      setDeviceInfo(data)
    }
  }))
  const [equipmentManagementModal, setEquipmentManagementModal] = useState(false)
  const [callerUid, setCallerUid] = useState('')
  const [deviceInfo, setDeviceInfo] = useState<any>({})
  const [userName, setUserName] = useState<any>({})
  const handleWindowsChange = async (): Promise<void> => {
    setEquipmentManagementModal(false)
  }
  return (
    <>
      <Modal
        title={`设备管理(${userName})`}
        open={equipmentManagementModal}
        footer={null}
        centered
        width={'500px'}
        onCancel={() => {
          handleWindowsChange()
        }}>
        <div className={styles.equipmentManagement}>
          <div>
            <div>
              <span>摄像头</span>
              <Select
                placeholder={deviceInfo?.videoList?.length ? '请选择设备' : '未检测到摄像头'}
                options={deviceInfo?.videoList} style={{ flexGrow: 1 }}
                value={deviceInfo?.videoDeviceId} onChange={async (e) => {
                  setDeviceInfo({
                    ...deviceInfo,
                    videoDeviceId: e
                  })
                }} />
            </div>
            <div>
              <span>麦克风</span>
              <Select
                placeholder={deviceInfo?.ecordingList?.length ? '请选择设备' : '未检测到麦克风'}
                options={deviceInfo?.ecordingList} style={{ flexGrow: 1 }}
                value={deviceInfo?.ecordingDeviceId} onChange={async (e) => {
                  setDeviceInfo({
                    ...deviceInfo,
                    ecordingDeviceId: e
                  })
                }} />;
            </div>
            <div>
              <span>输入音量</span>
              <Slider value={deviceInfo.ecordingVolume} style={{ flexGrow: 1 }} max={255}
                onChange={async (e) => {
                  setDeviceInfo({
                    ...deviceInfo,
                    ecordingVolume: e
                  })
                }} disabled={!deviceInfo.ecordingDeviceId} />
            </div>
            <div>
              <span>扬声器</span>
              <Select
                placeholder={deviceInfo?.playBackList?.length ? '请选择设备' : '未检测到麦克风'}
                options={deviceInfo?.playBackList} style={{ flexGrow: 1 }}
                value={deviceInfo?.playBackDeviceId} onChange={async (e) => {
                  setDeviceInfo({
                    ...deviceInfo,
                    playBackDeviceId: e
                  })
                }} />;
            </div>
          </div>
          <div>
            <Button type="primary" className='m-ant-btn' onClick={async () => {
              let isOpen = await getKeyOpenChildWindow('shareScreenWindow')
              if (isOpen) {
                props.setDriver?.({
                  uid: callerUid,
                  driversJsonString: JSON.stringify(deviceInfo)
                })
              } else {
                await window.electron.onInvoke('setDrivers', {
                  uid: callerUid,
                  driversJsonString: JSON.stringify(deviceInfo)
                })
              }
              handleWindowsChange()
              message.success('设置成功')
            }}>确定</Button>
            <Button type="primary"
              style={{ backgroundColor: '#31353A', marginLeft: '10px' }}
              onClick={() => handleWindowsChange()}>取消</Button>
          </div>
        </div>
      </Modal >
    </>
  )
})

export default EquipmentManagement