import { useCallback, useEffect, useRef, useState } from 'react';
import { getUserMedia, LocalTrack, Space, SpaceEvent, TrackKind, TrackSource } from '@mux/spaces-web';
import { Participant } from './';

const CanvasBroadcast = () => {

// 🚨 Don’t forget to add your own JWT here!
  const JWT = "..."

  const spaceRef = useRef(null);
  const [localParticipant, setLocalParticipant] = useState(null);
  const [participants, setParticipants] = useState([]);
  const joined = !!localParticipant;
  const canvasVideo = useRef<HTMLVideoElement>();

  const addParticipant = useCallback(
    (participant) => {
      setParticipants((currentParticipants) => [
        ...currentParticipants,
        participant,
      ]);
    },
    [setParticipants],
  );

  const removeParticipant = useCallback(
    (participantLeaving) => {
      setParticipants((currentParticipants) =>
        currentParticipants.filter(
          (currentParticipant) =>
            currentParticipant.connectionId !== participantLeaving.connectionId,
        ),
      );
    },
    [setParticipants],
  );

  useEffect(() => {
    const space = new Space(JWT);

    space.on(SpaceEvent.ParticipantJoined, addParticipant);
    space.on(SpaceEvent.ParticipantLeft, removeParticipant);

    spaceRef.current = space;

    return () => {
      space.off(SpaceEvent.ParticipantJoined, addParticipant);
      space.off(SpaceEvent.ParticipantLeft, removeParticipant);
    };
  }, [addParticipant, removeParticipant]);

  const join = useCallback(async () => {
    // Join the Space
    let localParticipant = await spaceRef.current.join();

    // Get and publish our local tracks

    /*let realTracks = await getUserMedia({
      audio: true,
      video: true,
    });*/

    const localTracks = canvasStream.current.getTracks().map(t => {
      console.log(t.getSettings());
      const payload = {
        tid: t.id,
        name: t.id,
        muted: false,
        type: t.kind == 'video' ? TrackKind.Video : TrackKind.Audio,
        source: t.kind == 'video' ? TrackSource.Camera : TrackSource.Microphone,
        height: t.getSettings().height || 0,
        width: t.getSettings().width || 0,
        metadata: {},
      };
      console.log(payload);
      // @ts-ignore
      return new LocalTrack(payload, t, 'Synthetic');
    });

    //console.log('tracks:', realTracks, localTracks);

    await localParticipant.publishTracks(localTracks);
    // Set the local participant so it will be rendered
    setLocalParticipant(localParticipant);
  }, []);


  const cancan = useRef<HTMLCanvasElement>();

  const canvasStream = useRef<MediaStream>();

  const drawSomething = () => {
    let c = cancan.current;
    if (c) {
      const ctx = c.getContext('2d');
      if (Math.random() < .001) {
        ctx.fillStyle = `hsl(${Math.random()*360}, 100%, 50%)`
        ctx.fillRect(0, 0, c.width, c.height);
      }
      ctx.strokeStyle = `hsl(${Math.random()*360}, 100%, 50%)`
      ctx.beginPath();
      ctx.arc(Math.random() * 300, Math.random() * 300, 20, 0, 2 * Math.PI);
      ctx.stroke();
    }
  };

  useEffect(() => {
    if (cancan.current) {
      let c = cancan.current;
      const ctx = c.getContext('2d');
      ctx.fillStyle = `hsl(0, 100%, 50%)`
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.strokeStyle = `hsl(${Math.random()*360}, 100%, 50%)`
      ctx.beginPath();
      ctx.arc(Math.random() * 300, Math.random() * 300, 50, 0, 2 * Math.PI);
      ctx.stroke();

      setInterval(() => {
        drawSomething();
      }, 15);

      canvasStream.current = c.captureStream(25);
      //canvasVideo.current.srcObject = canvasStream.current;
      console.log(canvasStream.current);
    }
  }, [cancan]);

  return (<div>
      <button onClick={join} disabled={joined}>
        Join Space
      </button>

      <canvas width="400" height="200" ref={cancan}
              style={{ width: '400px', height: '225px', border: '1px solid red', backgroundColor: '#EEE' }}>
      </canvas>

      <video
        ref={canvasVideo}
        crossOrigin="anonymous"
        autoPlay
        playsInline
        muted={true}
        style={{ width: '400px', height: '225px', border: '1px solid green' }}/>

      {localParticipant && (
        <Participant
          key={localParticipant.connectionId}
          participant={localParticipant}
        />
      )}

      {participants.map((participant) => {
        return (
          <Participant
            key={participant.connectionId}
            participant={participant}
          />
        );
      })}
    </div>
  );
};


export default CanvasBroadcast;