import React, { useState } from "react";
import { Typography } from "@material-ui/core";
import { Box, Button } from "@material-ui/core";
import { LazyLog, ScrollFollow } from "react-lazylog";

const MachineLog = () => {
  const [logs, setLogs] = useState(["Welcome..."]);
  const addLog = text => {
    setLogs(prev => [...prev, text]);
  };

  const randomLog = () => {
    addLog(
      "Text messaging, or texting, is the act of composing and sending electronic messages"
    );
    addLog(
      "The term originally referred to messages sent using the Short Message Service (SMS). "
    );
  };

  return (
    <Box margin={1}>
      <Typography variant="h6" gutterBottom component="div">
        Logs
      </Typography>
      <div style={{ height: 200 }}>
        <ScrollFollow
          startFollowing={true}
          render={({ follow, onScroll }) => (
            <LazyLog
              extraLines={1}
              enableSearch
              text={logs.join("\n")}
              caseInsensitive
              follow={follow}
              onScroll={onScroll}
            />
          )}
        />
      </div>
      <Button variant="contained" color="primary" onClick={randomLog}>
        Add
      </Button>
    </Box>
  );
};

export default MachineLog;