import React, {useContext, useEffect, useState} from "react";
import intl from "react-intl-universal";
import MainP from "../MainP/MainP";
import MainE from "../MainE/MainE";
import MainQ from "../MainQ/MainQ";
import TabPanel from "../Component/TabPanel";
import SwitchOnOff from "../Component/SwitchOnOff";
import {useAppSelector} from "../../store/hooks";
import {selectSwitchState} from "../../store/ChangeSwitchState";
import {ThisLineID} from "../../context/ThisLineID";

function SwitchAll() {
  const [PageIndex, setPageIndex] = useState(1)
  const state = useAppSelector(selectSwitchState)
  useEffect(() => {
      let timerId: NodeJS.Timer;

      function StartSwitch() {
        timerId = setTimeout(() => {
          if (PageIndex < 6) {
            setPageIndex(PageIndex + 1)
          } else {
            setPageIndex(1)
          }
        }, 30000)
      }

      function StopSwitch() {
        clearInterval(timerId)
      }

      if (state) {
        StartSwitch()
      } else {
        StopSwitch()
      }

      window.dispatchEvent(new Event('resize'))
      return () => {
        clearInterval(timerId)
      }
    }, [PageIndex, state]
  )
  return (
    <div>
      <SwitchOnOff/>
      <TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
      <TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
      <ThisLineID.Provider value={'1'}>
        <TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
      </ThisLineID.Provider>
      <ThisLineID.Provider value={'2'}>
        <TabPanel index={4} value={PageIndex}><MainE/></TabPanel>
      </ThisLineID.Provider>
      <ThisLineID.Provider value={'3'}>
        <TabPanel index={5} value={PageIndex}><MainE/></TabPanel>
      </ThisLineID.Provider>
      <ThisLineID.Provider value={'4'}>
        <TabPanel index={6} value={PageIndex}><MainE/></TabPanel>
      </ThisLineID.Provider>
    </div>
  )
}

export default SwitchAll;