import React from "react";
import PropTypes from "prop-types";
import grey from "@material-ui/core/colors/grey";
import { Paper, makeStyles } from "@material-ui/core";

const styles = {
  cover: {
    width: "100%"
  },
  bar: {
    backgroundColor: grey[200],
    height: 10,
    margin: 20,
    "&:nth-child(2n)": {
      marginRight: "20%"
    }
  },
  paper: {
    padding: "10px",
    borderRadius: "6px"
  }
};

const useStyles = makeStyles(styles);

const LoadingText = ({ lines = 4, onPaper = false, ...props }) => {
  const classes = useStyles();
  const loadingText = (
    <div className={classes.cover} {...props}>
      {[...Array(lines)].map((_e, i) => (
        <div className={classes.bar} key={i}></div>
      ))}
    </div>
  );

  if (onPaper) {
    return <Paper className={classes.paper}>{loadingText}</Paper>;
  }

  return loadingText;
};

LoadingText.propTypes = {
  lines: PropTypes.number,
  onPaper: PropTypes.bool
};

export default LoadingText;
