import React, {useContext} from "react";
import intl from "react-intl-universal";

import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"

import {useAppSelector} from "../../../store/hooks";
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";

function RightTableDayE() {
  const contextLineID = useContext(ThisLineID);
  const AllData = useAppSelector(selectAllLineEquipmentData);
  const LineID = "Line_" + contextLineID;
  let ProductData: Array<Product> = [];
  switch (LineID) {
    case 'Line_1':
      ProductData = AllData.Line_1.equipmentProductDays;
      break;
    case 'Line_2':
      ProductData = AllData.Line_2.equipmentProductDays;
      break;
    case 'Line_3':
      ProductData = AllData.Line_3.equipmentProductDays;
      break;
    case 'Line_4':
      ProductData = AllData.Line_4.equipmentProductDays;
      break;
  }

  const SlicedProductData = ProductData.slice(0, 5)

  return (
    <StyledTableContainer>
      <Table>
        <TableHead>
          <StyledTableRow>
            <StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
            <StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
          </StyledTableRow>
        </TableHead>
        <TableBody>
          {SlicedProductData.map((item, index) => (
            <StyledTableRow key={index}>
              <StyledTableCell align="center">{item.sectionName}</StyledTableCell>
              <StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
              <StyledTableCell align="center">{item.inputNum}</StyledTableCell>
              <StyledTableCell align="center">{item.outputNum}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </StyledTableContainer>
  )
}

export default RightTableDayE;