import {useEffect, useState} from 'react';
import {Outlet, useParams} from 'react-router-dom';

import {decode, encode} from '@/net/packets/index.js';

import styles from './play.module.css';

export default function Play() {
  const [Client, setClient] = useState();
  const params = useParams();
  const [type] = params['*'].split('/');
  useEffect(() => {
    async function loadClient() {
      let Client;
      switch (type) {
        case 'local':
          ({default: Client} = await import('@/client/local.js'));
          break;
        case 'remote':
          ({default: Client} = await import('@/client/remote.js'));
          break;
      }
      class SilphiusClient extends Client {
        accept(packed) {
          super.accept(decode(packed));
        }
        transmit(packet) {
          super.transmit(encode(packet));
        }
      }
      setClient(() => SilphiusClient);
    }
    loadClient();
  }, [type]);
  return (
    <div className={styles.play}>
      <Outlet context={Client} />
    </div>
  );
}