import {
  ProfilePrompt,
  SearchAgent,
  ProfilesStore,
  profilesStoreContext,
  ListProfiles,
} from "@holochain-open-dev/profiles";
import {
  InvitationsList,
  CreateInvitations,
  InvitationsStore,
} from "@eyss/invitations";
import { AppWebsocket } from "@holochain/conductor-api";
import { HolochainClient } from "@holochain-open-dev/cell-client";
import { LitElement, html } from "lit";
import { ScopedElementsMixin } from "@open-wc/scoped-elements";
import { ContextProvider } from "@lit-labs/context";

class InvitationsTest extends ScopedElementsMixin(LitElement) {
  static get properties() {
    return {
      loaded: {
        type: Boolean,
      },
    };
  }

  async firstUpdated() {
    const appWebsocket = await AppWebsocket.connect("ws://localhost:8888");
    const appInfo = await appWebsocket.appInfo({
      installed_app_id: "test-app",
    });

    const cellData = appInfo.cell_data[0];
    const cellClient = new HolochainClient(appWebsocket, cellData);

    new ContextProvider(
      this,
      profilesStoreContext,
      new ProfilesStore(cellClient, {
        avatarMode: "avatar",
      })
    );
    const invitationsStore = new InvitationsStore(cellClient, {
      clearOnInvitationComplete: false,
    });

    new ContextProvider(this, invitationsStoreContext, invitationsStore);

    this.loaded = true;
  }

  render() {
    if (!this.loaded) return html`<span>Loading...</span>`;
    return html`
      <profile-prompt>
        <create-invitation></create-invitation>
        <invitations-list include-myself></invitations-list>
      </profile-prompt>
    `;
  }

  static get scopedElements() {
    return {
      "create-invitation": ProfilePrompt,
      "invitations-list": SearchAgent,
      "list-profiles": ListProfiles,
    };
  }
}

customElements.define("invitations-test", InvitationsTest);