import React, { useEffect } from 'react';
import { styled, keyframes } from '@mui/system';

const binaryScroll = keyframes`
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
`;

const flicker = keyframes`
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 0.99;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
  22% {
    opacity: 0.4;
  }
`;

const changeNumber = keyframes`
  0% { content: "0"; }
  25% { content: "1"; }
  50% { content: "0"; }
  75% { content: "1"; }
  100% { content: "0"; }
`;

const BinaryWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: black;
  overflow: hidden;
  color: lime;
  display: flex;
  justify-content: space-around;
`;

const BinaryText = styled('div')`
  position: absolute;
  bottom: 0;
  font-family: 'Consolas', monospace;
  font-size: 16px;
  animation: ${binaryScroll} linear infinite, ${flicker} 3s infinite;
  white-space: nowrap;
  filter: drop-shadow(0 0 5px lime);
  display: flex;

  & span {
    animation: ${changeNumber} 1s steps(1) infinite;
  }

  &:before {
    content: attr(data-content);
  }
`;

const BinaryBackground = ({ children }) => {
  useEffect(() => {
    const binaryWrapper = document.getElementById('binaryWrapper');
    for (let i = 0; i < 30; i++) {
      const text = document.createElement('div');
      text.className = BinaryText.styledComponentId;
      const binaryString = Array.from({ length: 30 }, () => `<span>${Math.floor(Math.random() * 2)}</span>`).join('');
      text.innerHTML = binaryString.repeat(100);
      text.style.animationDuration = `${Math.random() * 10 + 5}s`; // Random duration between 5 to 15 seconds
      text.style.left = `${Math.random() * 100}%`; // Random horizontal position
      binaryWrapper.appendChild(text);
    }
  }, []);

  return (
    <BinaryWrapper id="binaryWrapper">
      {children}
    </BinaryWrapper>
  );
};

export default BinaryBackground;