import React 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 {useAppSelector} from "../../../store/hooks";
import {selectAlarms} from "../../../store/ProductionMonitoringEntity";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";

function LeftUpTable() {
  const alarms = useAppSelector(selectAlarms);

  return (
    <StyledTableContainer>
      <Table>
        <TableHead>
          <StyledTableRow>
            <StyledTableCell align="center" sx={{minWidth: 35}}>{intl.get('serialNo')}</StyledTableCell>
            <StyledTableCell align="center" sx={{minWidth: 70}}>{intl.get('alarmTime')}</StyledTableCell>
            <StyledTableCell align="center" sx={{minWidth: 110}}>{intl.get('alarmCode')}</StyledTableCell>
            <StyledTableCell align="center" sx={{
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis'
            }}>{intl.get('alarmContent')}</StyledTableCell>
          </StyledTableRow>
        </TableHead>
        <TableBody>
          {alarms.map((alarm, index) => (
            <StyledTableRow key={index}>
              <StyledTableCell align="center">{index + 1}</StyledTableCell>
              <StyledTableCell align="center">{alarm.alarmTime}</StyledTableCell>
              <StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
              <StyledTableCell align="center" sx={{
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              }}>{alarm.alarmContent}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </StyledTableContainer>
  );
}

export default LeftUpTable;