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

function RightDownLeftQ() {
  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 RightMiddleLeftQ">
      <div className="fineWin-footer"/>
      <div className="box_77 flex-row justify-between">
        <div className="box_36 flex-col"/>
        <span className="text_2">{intl.get('DefectSummaryLine3')}</span>
        <ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
          <StyledToggleButton value={1} sx={{width: "64px"}}>
            {intl.get('ThisDayShort')}
          </StyledToggleButton>
          <StyledToggleButton value={2} sx={{width: "64px"}}>
            {intl.get('ThisWeekShort')}
          </StyledToggleButton>
          <StyledToggleButton value={3} sx={{width: "64px"}}>
            {intl.get('ThisMonthShort')}
          </StyledToggleButton>
        </ToggleButtonGroup>
      </div>
      <div>
        <TabPanel index={1} value={time}><QualityRightTable lineName={"Line_3"}
                                                            timeName={"todayQualityLineAll"}/></TabPanel>
        <TabPanel index={2} value={time}><QualityRightTable lineName={"Line_3"}
                                                            timeName={"weekQualityLineAll"}/></TabPanel>
        <TabPanel index={3} value={time}><QualityRightTable lineName={"Line_3"}
                                                            timeName={"monthQualityLineAll"}/></TabPanel>
      </div>
    </div>
  )
}

export default RightDownLeftQ;