import styles from '@/components/StupWizard/index.module.scss'
import ImageUrl from '@/utils/package/ImageUrl';
import { Button, Checkbox, Empty, Input, Modal, Popover, Select, Slider, message } from 'antd';
import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
import agora from '@/utils/package/agora'
import { CloseOutlined, LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { storage } from '@/utils';
import path from 'path';
const fs = require('fs').promises;
const { exec } = require('child_process');
const StupWizard = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: () => {
      agora.init()
      setIsStupWizard(true)
    }
  }))
  const [list, setList] = useState([
    {
      title: '视频',
      icon: ImageUrl.icon39,
      iconActive: ImageUrl.icon39Active,
      active: true,
    },
    {
      title: '音频',
      icon: ImageUrl.icon40,
      iconActive: ImageUrl.icon40Active,
      active: false,
    },
    {
      title: '录制',
      icon: ImageUrl.icon41,
      iconActive: ImageUrl.icon41Active,
      active: false,
    },
    {
      title: '共享文件',
      icon: ImageUrl.icon42,
      iconActive: ImageUrl.icon42Active,
      active: false,
    }
  ])
  const [isStupWizard, setIsStupWizard] = useState(false);
  return (
    <>
      <Modal
        title=""
        open={isStupWizard}
        footer={null}
        closable={false}
        destroyOnClose={true}
        centered
        width={'70vw'}
        className='modal-padding'>
        <div className={styles.stupWizard}>
          <div className={styles.stupWizardLeft}>
            {list.map((row: any, index: number) => {
              return (
                <div key={index} className={`${row.active ? styles.active : ''}`} onClick={async () => {
                  const newList = [...list];
                  newList.forEach(item => item.active = false);
                  newList[index].active = true;
                  setList(newList)
                  agora.stopPlaybackDeviceTest()
                  agora.stopRecordingDeviceTest()
                }}>
                  <img src={row.active ? row.iconActive : row.icon} alt="" />
                  <span>{row.title}</span>
                </div>
              )
            })}
          </div>
          <div className={styles.stupWizardRight}>
            <CloseOutlined style={{
              position: 'absolute',
              color: 'white',
              right: '20px',
              top: '16px',
              cursor: 'pointer'
            }}
              onClick={() => {
                agora.release()
                setIsStupWizard(false)
              }}
            />
            {list[0].active ? <VideoComponents /> : null}
            {list[1].active ? <AudioComponents /> : null}
            {list[2].active ? <RecordingComponents /> : null}
            {list[3].active ? <FileComponents /> : null}
          </div>
        </div>
      </Modal>
    </>
  )
})

const VideoComponents = () => {
  const [videoDeviceManager, setVideoDeviceManager] = useState<any>({
    list: [],
    item: null,
  });
  useEffect(() => {
    getVideoDeviceList()
  }, []);
  const getVideoDeviceList = async (): Promise<void> => {
    const setting = await JSON.parse(storage.getItem('setting') as string)
    const userInfo = JSON.parse(storage.getItem('user') as string)
    agora.getVideoDeviceManager().then(async (res) => {
      const { item, list } = res
      if ((!setting.videoDeviceId && item) || (!(list.find((item: any) => item.deviceId === setting.videoDeviceId)) && item)) {
        setting.videoDeviceId = item
      }
      if (!list.length) {
        setting.videoDeviceId = ''
      }
      storage.setItem('setting', JSON.stringify(setting))
      setVideoDeviceManager({
        list: list.map((row: any) => {
          return {
            value: row.deviceId,
            label: row.deviceName
          }
        }),
        item: setting.videoDeviceId ? setting.videoDeviceId : item || null,
      })
      if (setting.videoDeviceId && list.length) {
        await agora.setVideoDeviceManager(setting.videoDeviceId)
        await agora.startPreview('videoPreview', Number(userInfo.account))
      }
    })
  }
  return (
    <>
      <div>
        <span>视频</span>
        <div className={styles.videoComponents}>
          {
            videoDeviceManager.item ?
              <div>
                <div id='videoPreview'>
                  <LoadingOutlined style={{
                    position: 'absolute',
                    color: 'white',
                    right: '50%',
                    fontSize: '30px',
                    top: '50%',
                  }} />
                </div>
              </div> :
              <div>
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                  <Empty description={'未检测到摄像头'} />
                </div>
              </div>
          }
          <div>
            <span>摄像头：</span>
            <Popover
              content={
                <span
                  style={{
                    color: 'white'
                  }}>
                  解释说明：如未检测到摄像头请插拔后重试
                </span>
              }
              title=""
            >
              <QuestionCircleOutlined style={{
                color: 'white',
                cursor: 'pointer',
                marginRight: '10px'
              }} />
            </Popover>
            <Select
              placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
              options={videoDeviceManager.list} style={{ flexGrow: 1, marginRight: '10px' }}
              value={videoDeviceManager.item} onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.videoDeviceId = e;
                storage.setItem('setting', JSON.stringify(setting))
                setVideoDeviceManager({
                  ...videoDeviceManager,
                  item: e
                })
                agora.setVideoDeviceManager(e)
              }} />

          </div>
        </div>
      </div>
    </>
  )
}
const AudioComponents = () => {
  const [audioDeviceManager, setAudioDeviceManager] = useState<any>({
    playBackList: [],
    ecordingList: [],
    playBackItem: null,
    ecordingItem: null,
    playBackVolume: 0,
    playBackActive: false,
    ecordingActive: false,
    ecordingVolume: 0,
    autoEcordingVolume: true,
  });
  useEffect(() => {
    getAudioMediaList()
    agora.registerEventHandler({
      onAudioVolumeIndication: (percentage: number) => {
        const dom = document.getElementById('deviceTest') as any;
        if (dom) {
          dom.style.width = `${percentage}%`
        }
      }
    })
  }, []);
  const getAudioMediaList = async (): Promise<void> => {
    const { playBackList, ecordingList, playBackItem, ecordingItem, ecordingVolume } = await agora.getAudioMediaList();
    const setting = await JSON.parse(storage.getItem('setting') as string)
    if ((!setting.ecordingDeviceId && ecordingItem.deviceId) || (!(ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId)) && ecordingItem.deviceId)) {
      setting.ecordingDeviceId = ecordingItem.deviceId
    }
    if ((!setting.playBackDeviceId && playBackItem.deviceId) || (!(playBackList.find((item: any) => item.deviceId === setting.playBackDeviceId)) && playBackItem.deviceId)) {
      setting.playBackDeviceId = playBackItem.deviceId
    }
    if (!ecordingList.length) {
      setting.ecordingDeviceId = ''
    }
    if (!playBackList.length) {
      setting.playBackDeviceId = ''
    }
    if (!setting.ecordingVolume) {
      setting.ecordingVolume = ecordingVolume;
    }
    if (!setting.playBackVolume) {
      setting.playBackVolume = 127;
    }
    storage.setItem('setting', JSON.stringify(setting))
    setAudioDeviceManager({
      ...audioDeviceManager,
      playBackList: playBackList.map((row: any) => {
        return {
          value: row.deviceId,
          label: row.deviceName
        }
      }),
      ecordingList: ecordingList.map((row: any) => {
        return {
          value: row.deviceId,
          label: row.deviceName
        }
      }),
      playBackItem: setting.playBackDeviceId ? setting.playBackDeviceId : playBackItem.deviceId || null,
      ecordingItem: setting.ecordingDeviceId ? setting.ecordingDeviceId : ecordingItem.deviceId || null,
      ecordingVolume: setting.ecordingVolume,
      playBackVolume: setting.playBackVolume,
      autoEcordingVolume: setting.autoEcordingVolume
    })
  }
  return (
    <>
      <div>
        <span>音频</span>
        <div className={styles.audioComponents}>
          <div>
            <div className={styles.audioComponentsSelect}>
              <span>麦克风：</span>
              <Select
                placeholder={audioDeviceManager.ecordingList.length ? '请选择设备' : '未检测到麦克风'}
                options={audioDeviceManager.ecordingList} style={{ flexGrow: 1 }}
                value={audioDeviceManager.ecordingItem} onChange={async (e) => {
                  const setting = await JSON.parse(storage.getItem('setting') as string)
                  setting.ecordingDeviceId = e;
                  storage.setItem('setting', JSON.stringify(setting))
                  setAudioDeviceManager({
                    ...audioDeviceManager,
                    ecordingItem: e
                  })
                  agora.setRecordingDevice(e)
                }} />;
              {audioDeviceManager.ecordingActive ? <div onClick={() => {
                agora.stopRecordingDeviceTest()
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  playBackActive: false,
                  ecordingActive: false,
                })
              }}>结束</div> : <div onClick={() => {
                agora.stopPlaybackDeviceTest()
                agora.startRecordingDeviceTest(100)
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  playBackActive: false,
                  ecordingActive: true,
                })
              }}>测试</div>}
            </div>
            {audioDeviceManager.ecordingActive ? <div className={styles.audioComponentsVolume}>
              <img src={ImageUrl.icon36} alt="" />
              <div>
                <img src={ImageUrl.icon34} alt="" />
                <div id='deviceTest'>
                  <img src={ImageUrl.icon35} alt="" />
                </div>
              </div>
            </div> : null}
            <div className={styles.audioComponentsSlider}>
              <span>输入音量：</span>
              <Slider value={audioDeviceManager.ecordingVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.ecordingVolume = e;
                storage.setItem('setting', JSON.stringify(setting))
                await agora.setRecordingDeviceVolume(e)
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  ecordingVolume: e,
                })
              }} disabled={!audioDeviceManager.ecordingItem} />
            </div>
            <div>
              <Checkbox onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.autoEcordingVolume = e.target.checked;
                storage.setItem('setting', JSON.stringify(setting))
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  autoEcordingVolume: e.target.checked
                })
              }} checked={audioDeviceManager.autoEcordingVolume}>自动调整麦克风音量</Checkbox>
            </div>
          </div>
          <div>
            <div className={styles.audioComponentsSelect}>
              <span>扬声器：</span>
              <Select
                placeholder={audioDeviceManager.playBackList.length ? '请选择设备' : '未检测到麦克风'}
                options={audioDeviceManager.playBackList} style={{ flexGrow: 1 }}
                value={audioDeviceManager.playBackItem} onChange={async (e) => {
                  const setting = await JSON.parse(storage.getItem('setting') as string)
                  setting.playBackDeviceId = e;
                  storage.setItem('setting', JSON.stringify(setting))
                  setAudioDeviceManager({
                    ...audioDeviceManager,
                    playBackItem: e
                  })
                  agora.setPlaybackDevice(e)
                }} />;
              {audioDeviceManager.playBackActive ? <div onClick={() => {
                agora.stopPlaybackDeviceTest()
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  playBackActive: false,
                  ecordingActive: false,
                })
              }}>结束</div> : <div onClick={() => {
                agora.stopRecordingDeviceTest()
                agora.startPlaybackDeviceTest()
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  playBackActive: true,
                  ecordingActive: false,
                })
              }}>测试</div>}
            </div>
            {audioDeviceManager.playBackActive ? <div className={styles.audioComponentsVolume}>
              <img src={ImageUrl.icon36} alt="" />
              <div>
                <img src={ImageUrl.icon34} alt="" />
                <div id='deviceTest'>
                  <img src={ImageUrl.icon35} alt="" />
                </div>
              </div>
            </div> : null}
            <div className={styles.audioComponentsSlider}>
              <span>输出音量：</span>
              <Slider value={audioDeviceManager.playBackVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.playBackVolume = e;
                storage.setItem('setting', JSON.stringify(setting))
                agora.setPlaybackDeviceVolume(e)
                setAudioDeviceManager({
                  ...audioDeviceManager,
                  playBackVolume: e,
                })
              }} disabled={!audioDeviceManager.playBackItem} />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
const RecordingComponents = () => {
  const [filePath, setFilePath] = useState('')
  useEffect(() => {
    const setting = JSON.parse(storage.getItem('setting') as string)
    if (!setting.recordingFilesPath) {
      setting.recordingFilesPath = path.dirname(process.execPath) + '\\';
      setFilePath(setting.recordingFilesPath)
      storage.setItem('setting', JSON.stringify(setting))
    } else {
      setFilePath(setting.recordingFilesPath);
    }
    window.addEventListener('customStorageChange', handleCustomStorageChange);
    return () => {
      window.removeEventListener('customStorageChange', handleCustomStorageChange);
    };
  }, [])
  const handleCustomStorageChange = (e: any): void => {
    if (e.key === 'setting') {
      const setting = JSON.parse(storage.getItem('setting') as string)
      setFilePath(setting.recordingFilesPath)
    }
  };
  return (
    <>
      <div>
        <span>录制</span>
        <div className={styles.recordingComponents}>
          <span>本地录制</span>
          <div>
            <span>本地录制文件路径</span>
            <Input
              placeholder="请填入文件路径"
              style={{ margin: '0 14px', flexGrow: 1 }}
              value={filePath}
              onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.recordingFilesPath = e.target.value;
                storage.setItem('setting', JSON.stringify(setting))
                setFilePath(e.target.value)
              }}
            />
            <Button type="primary" onClick={() => {
              window.electron.selectFilePath({
                key: 'recordingFilesPath',
              })
            }} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
            <Button type="primary" onClick={async () => {
              try {
                await fs.access(filePath, fs.constants.F_OK);
                if (process.platform === 'win32') {
                  exec(`explorer "${filePath}"`);
                } else if (process.platform === 'darwin') {
                  exec(`open "${filePath}"`);
                }
              } catch (error: any) {
                if (error.code === 'ENOENT') {
                  message.error('文件夹不存在！')
                } else {
                  message.error(error)
                }
              }
            }} style={{ backgroundColor: '#31353A' }}>打开</Button>
          </div>
        </div>
      </div>
    </>
  )
}
const FileComponents = () => {
  const [filePath, setFilePath] = useState('')
  const [isShareSavePath, setIsShareSavePath] = useState(true)
  useEffect(() => {
    const setting = JSON.parse(storage.getItem('setting') as string)
    if (!setting.shareFilesPath) {
      setting.shareFilesPath = path.dirname(process.execPath) + '\\';
      setFilePath(setting.shareFilesPath)
      storage.setItem('setting', JSON.stringify(setting))
    } else {
      setFilePath(setting.shareFilesPath);
    }
    setIsShareSavePath(setting.isShareSavePath)
    window.addEventListener('customStorageChange', handleCustomStorageChange);
    return () => {
      window.removeEventListener('customStorageChange', handleCustomStorageChange);
    };
  }, [])
  const handleCustomStorageChange = (e: any): void => {
    if (e.key === 'setting') {
      const setting = JSON.parse(storage.getItem('setting') as string)
      setFilePath(setting.shareFilesPath)
    }
  };
  return (
    <>
      <div>
        <span>共享文件</span>
        <div className={styles.fileComponents}>
          <span>文件下载</span>
          <div>
            <span>保存位置</span>
            <Input
              placeholder="请填入保存目录"
              style={{ margin: '0 14px', flexGrow: 1 }}
              value={filePath}
              onChange={async (e) => {
                const setting = await JSON.parse(storage.getItem('setting') as string)
                setting.shareFilesPath = e.target.value;
                storage.setItem('setting', JSON.stringify(setting))
                setFilePath(e.target.value)
              }}
            />
            <Button type="primary" onClick={() => {
              window.electron.selectFilePath({
                key: 'shareFilesPath',
              })
            }} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
            <Button type="primary" onClick={async () => {
              try {
                await fs.access(filePath, fs.constants.F_OK);
                if (process.platform === 'win32') {
                  exec(`explorer "${filePath}"`);
                } else if (process.platform === 'darwin') {
                  exec(`open "${filePath}"`);
                }
              } catch (error: any) {
                if (error.code === 'ENOENT') {
                  message.error('文件夹不存在！')
                } else {
                  message.error(error)
                }
              }
            }} style={{ backgroundColor: '#31353A' }}>打开</Button>
          </div>
          <div>
            <Checkbox onChange={async (e) => {
              const setting = await JSON.parse(storage.getItem('setting') as string)
              setting.isShareSavePath = e.target.checked;
              storage.setItem('setting', JSON.stringify(setting))
              setIsShareSavePath(e.target.checked)
            }} checked={isShareSavePath}>下载前询问每个文件保存位置</Checkbox>
          </div>
        </div>
      </div>
    </>
  )
}

export default StupWizard