import styles from '@/components/SpeakerModeModal/index.module.scss'
import { Checkbox, Modal } from 'antd';
import { useState, useImperativeHandle, forwardRef, memo } from "react";
import { storage } from '@/utils';
import { useLocation } from 'react-router-dom';
import { GetSyncView } from '@/api/Meeting';
interface Props {
  onClick: () => void;
  meetingMode: string;
}
const SpeakerModeModal = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeSpeakerMode: () => {
      setIsSpeakerModeModal(true)
    }
  }))
  const [meetingMode, setMeetingMode] = useState('StandardMode')
  const { state } = useLocation();
  const [isSpeakerModeModal, setIsSpeakerModeModal] = useState(false);
  const [isView, setIsView] = useState(false);
  const setMode = async (mode: string): Promise<void> => {
    if (isView) {
      await GetSyncView(state.channelId, mode)
    }
    storage.setItem('meetingMode', mode)
    setMeetingMode(mode);
    setIsSpeakerModeModal(false)
  }
  return (
    <>
      <Modal
        title="演讲者模式"
        open={isSpeakerModeModal}
        footer={null}
        onCancel={() => setIsSpeakerModeModal(false)}
        centered
        width={'560px'}
      >
        <div className={styles.speakerModeModal}>
          <FreedomMode onClick={() => setMode('FreedomMode')} meetingMode={meetingMode} />
          <StandardMode onClick={() => setMode('StandardMode')} meetingMode={meetingMode} />
          <SpeakerMode onClick={() => setMode('SpeakerMode')} meetingMode={meetingMode} />
          <SingleScreenMode onClick={() => setMode('SingleScreenMode')} meetingMode={meetingMode} />
          <DualScreenMode onClick={() => setMode('DualScreenMode')} meetingMode={meetingMode} />
          <FourScreenMode onClick={() => setMode('FourScreenMode')} meetingMode={meetingMode} />
        </div>
        <Checkbox onChange={(e) => {
          setIsView(e.target.checked)
        }} checked={isView}>同步所有视图</Checkbox>
      </Modal>
    </>
  )
})

const FreedomMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 宫格模式
  return (
    <>
      <div className={styles.freedomMode} onClick={onClick}>
        <div className={`${meetingMode === 'FreedomMode' ? styles.active : ''}`}>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(item => <div key={item}></div>)}
        </div>
        <span>宫格模式</span>
      </div>
    </>
  )
}
const StandardMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 标准模式
  return (
    <>
      <div className={styles.standardMode} onClick={onClick}>
        <div className={`${meetingMode === 'StandardMode' ? styles.active : ''}`}>
          <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div></div>
        </div>
        <span>标准模式</span>
      </div>
    </>
  )
}
const SpeakerMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 演讲者模式
  return (
    <>
      <div className={styles.speakerMode} onClick={onClick}>
        <div className={`${meetingMode === 'SpeakerMode' ? styles.active : ''}`}>
          <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div></div>
        </div>
        <span>演讲者模式</span>
      </div>
    </>
  )
}
const SingleScreenMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 单画面模式
  return (
    <>
      <div className={styles.singleScreenMode} onClick={onClick}>
        <div className={`${meetingMode === 'SingleScreenMode' ? styles.active : ''}`}>
          <div></div>
        </div>
        <span>单画面模式</span>
      </div>
    </>
  )
}
const DualScreenMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 二分屏模式
  return (
    <>
      <div className={styles.dualScreenMode} onClick={onClick}>
        <div className={`${meetingMode === 'DualScreenMode' ? styles.active : ''}`}>
          <div></div>
          <div></div>
        </div>
        <span>二分屏模式</span>
      </div>
    </>
  )
}
const FourScreenMode: React.FC<Props> = ({ onClick, meetingMode }) => {
  // 四分屏模式
  return (
    <>
      <div className={styles.fourScreenMode} onClick={onClick}>
        <div className={`${meetingMode === 'FourScreenMode' ? styles.active : ''}`}>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <span>四分屏模式</span>
      </div>
    </>
  )
}

export default memo(SpeakerModeModal)