import { createMemo, createSignal } from "solid-js";
import Integration from "../data/integration";
import WebRTCService from "../services/webrtc-service";

const [integration, setIntegration] = createSignal(null);

function IntegrationView(props) {
  const title = createMemo(() =>
    integration && typeof integration === "function"
      ? integration().getName()
      : "Integration"
  );
  let videoElement = null;

  function handleConnectWebRTC() {
    let integrationId = integration().getId();
    WebRTCService.setVideoElement(videoElement);
    WebRTCService.connect(integrationId);
  }

  return (
    <div
      class={
        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
        props.class
      }
    >
      <span>Integration</span>
      <h1>{title}</h1>
      <div class="d-flex flex-row">
        <div class="d-flex flex-row justify-content-end flex-fill">
          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
            <i class="bi bi-plug-fill me-2"></i>
            Connect
          </button>
        </div>
      </div>
      <div class="flex-fill d-flex flex-column justify-content-center align-items-center rounded overflow-hidden">
        <video
          ref={videoElement}
          class="w-100 h-100"
          style="background-color: #000"
          controls={true}
          muted={false}
          autoplay={true}
        ></video>
      </div>
    </div>
  );
}

IntegrationView.setIntegration = setIntegration;
export default IntegrationView;