import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { Box } from "@mui/material";
import { useSensitiveInfo } from "../../../../hooks";
import { LazyLog, ScrollFollow } from "react-lazylog";

const MachineLog = ({ logs }) => {
  const { maskElements } = useSensitiveInfo();

  const displayLogs = useMemo(() => (logs.length > 0 ? maskElements(logs).join("\n") : "..."), [logs, maskElements]);

  return (
    <Box>
      <div style={{ height: 200 }}>
        <ScrollFollow
          startFollowing={true}
          render={({ follow, onScroll }) => (
            <LazyLog
              extraLines={0}
              enableSearch
              text={displayLogs}
              caseInsensitive
              follow={follow}
              onScroll={onScroll}
            />
          )}
        />
      </div>
    </Box>
  );
};

MachineLog.propTypes = {
  logs: PropTypes.array.isRequired
};

export default MachineLog;
