import { useEffect } from 'react';
import styles from '../styles/Matrix.module.css'

export default function Matrix({ height, width }) {
	useEffect(() => {
		console.log(height, width);
		const canvas = document.getElementById('waterfall');
		const ctx = canvas.getContext('2d');

		const w = canvas.width = document.body.offsetWidth;
		const h = canvas.height = document.body.offsetHeight;
		const cols = Math.floor(w / 20) + 1;
		const ypos = Array(cols).fill(0);

		ctx.fillStyle = '#000';
		ctx.fillRect(0, 0, w, h);

		function matrix() {
			ctx.fillStyle = '#0001';
			ctx.fillRect(0, 0, w, h);

			ctx.fillStyle = '#0f0';
			ctx.font = '15pt monospace';
			let runningIndex = 0;

			ypos.forEach((y, ind) => {
				const randVal = Math.random()
				let text = "";
				if(randVal > 0.6) {
					text = String.fromCharCode(Math.random() * 128);
				} else {
					const items = ["p", "n", "h"]
					text = items[runningIndex];
					runningIndex++;
					if(runningIndex >= 3) {
						runningIndex = 0;
					}
				}
				const x = ind * 20;
				ctx.fillText(text, x, y);
				if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
				else ypos[ind] = y + 20;
			});
		}

		setInterval(matrix, 50);
	}, []);
	return (
	  <canvas height={height} width={width} id={"waterfall"} className={styles.Matrix}>

	  </canvas>
	)
      }