import React, { useCallback, useEffect, useRef, useState } from "react";
import ColorHash from "color-hash";
import styles from "./DevTools.module.css";

const colorHash = new ColorHash({ lightness: 0.8 });

function UserId({ userId, ...rest }) {
  const shortUserId = userId.split(":")[0];
  const color = colorHash.hex(shortUserId);
  return (
    <span style={{ color }} {...rest}>
      {shortUserId}
    </span>
  );
}

function CallId({ callId, ...rest }) {
  const shortId = callId.substr(callId.length - 16);
  const color = colorHash.hex(shortId);

  return (
    <span style={{ color }} {...rest}>
      {shortId}
    </span>
  );
}

export function DevTools({ manager }) {
  const [debugState, setDebugState] = useState(manager.debugState);
  const [selectedEvent, setSelectedEvent] = useState();

  useEffect(() => {
    function onRoomDebug() {
      setDebugState(manager.debugState);
    }

    manager.on("debug", onRoomDebug);

    return () => {
      manager.removeListener("debug", onRoomDebug);
    };
  }, [manager]);

  return (
    <div className={styles.devTools}>
      {Array.from(debugState.entries()).map(([userId, props]) => (
        <UserState
          key={userId}
          onSelectEvent={setSelectedEvent}
          userId={userId}
          {...props}
        />
      ))}
      {selectedEvent && (
        <EventViewer
          event={selectedEvent}
          onClose={() => setSelectedEvent(null)}
        />
      )}
    </div>
  );
}

function UserState({ userId, state, callId, events, onSelectEvent }) {
  const eventsRef = useRef();
  const [autoScroll, setAutoScroll] = useState(true);

  useEffect(() => {
    if (autoScroll) {
      const el = eventsRef.current;
      el.scrollTop = el.scrollHeight - el.clientHeight;
    }
  });

  const onScroll = useCallback(() => {
    const el = eventsRef.current;

    if (el.scrollHeight - el.scrollTop === el.clientHeight) {
      setAutoScroll(true);
    } else {
      setAutoScroll(false);
    }
  }, []);

  return (
    <div className={styles.user}>
      <div className={styles.userId}>
        <UserId userId={userId} />
        <span>{`(${state})`}</span>
        {callId && <CallId callId={callId} />}
      </div>
      <div ref={eventsRef} className={styles.events} onScroll={onScroll}>
        {events.map((event, idx) => (
          <div
            className={styles.event}
            key={idx}
            onClick={() => onSelectEvent(event)}
          >
            <span className={styles.eventType}>{event.type}</span>
            {event.callId && (
              <CallId className={styles.eventDetails} callId={event.callId} />
            )}
            {event.newCallId && (
              <>
                <span className={styles.eventDetails}>{"->"}</span>
                <CallId
                  className={styles.eventDetails}
                  callId={event.newCallId}
                />
              </>
            )}
            {event.to && (
              <UserId className={styles.eventDetails} userId={event.to} />
            )}
            {event.reason && (
              <span className={styles.eventDetails}>{event.reason}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function EventViewer({ event, onClose }) {
  return (
    <div className={styles.eventViewer}>
      <p>Event Type: {event.type}</p>
      {event.callId && (
        <p>
          Call Id: <CallId callId={event.callId} />
        </p>
      )}
      {event.newCallId && (
        <p>
          New Call Id:
          <CallId callId={event.newCallId} />
        </p>
      )}
      {event.to && (
        <p>
          To: <UserId userId={event.to} />
        </p>
      )}
      {event.reason && (
        <p>
          Reason: <span>{event.reason}</span>
        </p>
      )}
      {event.content && (
        <>
          <p>Content:</p>
          <pre className={styles.content}>
            {JSON.stringify(event.content, undefined, 2)}
          </pre>
        </>
      )}
      <button onClick={onClose}>Close</button>
    </div>
  );
}