import React, { useState, useEffect, useRef } from 'react';
import styles from './App.module.css';

const UserList = React.memo(({ users }) => (
  <div className={styles.userList}>
    <span className={styles.title}>TeamSpeak Server Status</span>
    {
      users.map(user => <span className={styles.user} key={user}>{user}</span>)
    }
  </div>
));

let vx = 2;
let vy = 3;

const updateVelocities = (el, bounding) => {
  if (el.offsetLeft <= 5 && vx < 0) {
    vx = -1 * vx;
  }
  if ((el.offsetLeft + el.offsetWidth) >= (bounding.offsetWidth - 20)) {
    vx = -1 * vx;
  }
  if (el.offsetTop <= 5 && vy < 0) {
    vy = -1 * vy;
  }
  if ((el.offsetTop + el.offsetHeight) >= (bounding.offsetHeight - 10)) {
    vy = -1 * vy;
  }
}

export default () => {
  const boundRef = useRef(null);
  const bounceRef = useRef(null);
  const [{x, y}, setPos] = useState({ x: 0, y: 0 });
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const update = async () => { 
      const res = await fetch("https://hiram.services/teamspeak/api");
      const { users } = await res.json();
      setUsers(users);
    };
    const interval = setInterval(update, 30000);
    update();
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const update = () => { 
      updateVelocities(bounceRef.current, boundRef.current);
      setPos({x: x + vx, y: y + vy}) 
    };
    const interval = setTimeout(update, 30);
    return () => clearTimeout(interval);
  }, [x, y]);

  return (
    <div className={styles.screen} ref={boundRef}>
      <div 
        style={{
          position: "absolute",
          top: `${y}px`,
          left: `${x}px`,
        }}
        ref={bounceRef}
      >
        <UserList users={users} />
      </div>
    </div>
  );
}