import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {ToggleButtonGroup} from "@mui/material";
import {StyledToggleButton} from "../../Component/StyledTable";
import TabPanel from "../../Component/TabPanel";
import RightTopChartDayQ from "../RightTopQ/RightTopChartDayQ";
import RightTopChartMonthQ from "../RightTopQ/RightTopChartMonthQ";
import RightTopChartWeekQ from "../RightTopQ/RightTopChartWeekQ";

function RightTopQ() {
  const [time, setTime] = useState(1);
  const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
    if (newTime !== null) {
      setTime(newTime);
      clearTimeout(timeout)
    }
  };
  const timeout = setTimeout(() => {
    if (time < 3) {
      setTime(time + 1)
    } else {
      setTime(1)
    }
  }, 5000)

  return (
    <div className="fineWin flex-col RightTopQ">
      <div className="fineWin-footer"/>
      <div className="box_77 flex-row justify-between">
        <div className="block_7 flex-col"/>
        <span className="text_2">{intl.get('LineDefectSummary')}</span>
        <ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "770px"}}>
          <StyledToggleButton value={1} sx={{width: "120px"}}>
            {intl.get('ThisDay')}
          </StyledToggleButton>
          <StyledToggleButton value={2} sx={{width: "120px"}}>
            {intl.get('ThisWeek')}
          </StyledToggleButton>
          <StyledToggleButton value={3} sx={{width: "120px"}}>
            {intl.get('ThisMonth')}
          </StyledToggleButton>
        </ToggleButtonGroup>
      </div>
      <div>
        <TabPanel index={1} value={time}><RightTopChartDayQ/></TabPanel>
        <TabPanel index={2} value={time}><RightTopChartWeekQ/></TabPanel>
        <TabPanel index={3} value={time}><RightTopChartMonthQ/></TabPanel>
      </div>
    </div>
  )
}

export default RightTopQ;