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

import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {useAppSelector} from "../../../store/hooks";
import {Alarm, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {ThisLineID} from "../../../context/ThisLineID";

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

  return (
    <StyledTableContainer>
      <Table>
        <TableHead>
          <StyledTableRow>
            <StyledTableCell align="center" sx={{minWidth: 30}}>{intl.get('serialNo')}</StyledTableCell>
            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('EquipmentName')}</StyledTableCell>
            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('alarmCode')}</StyledTableCell>
            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('AlarmLevel')}</StyledTableCell>
            <StyledTableCell align="center">{intl.get('alarmContent')}</StyledTableCell>
          </StyledTableRow>
        </TableHead>
        <TableBody>
          {equipmentAlarm.map((alarm, index) => (
            <StyledTableRow key={index + 1}>
              <StyledTableCell align="center">{index + 1}</StyledTableCell>
              <StyledTableCell align="center">{alarm.equName}</StyledTableCell>
              <StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
              <StyledTableCell align="center">{alarm.alarmValue}</StyledTableCell>
              <StyledTableCell align="center">{alarm.alarmContent}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </StyledTableContainer>
  );
}

export default LeftUpTableE;