import { Component, h, Prop, State } from '@stencil/core';

@Component({
  tag: 'bp-sdk-message-outlet',
  styleUrl: 'bp-sdk-message-outlet',
})
export class BpSdkMessageOutlet {
  /**
   * Answer id
   */
  @Prop() answerId: string;

  @State() useExternal = false;

  resetState() {}

  connectedCallback() {
    this.resetState();
  }

  componentWillLoad() {
    this.useExternal = !!customElements.get('bp-sdk-external-message-outlet');
    customElements.whenDefined('bp-sdk-external-message-outlet').then(() => {
      this.useExternal = true;
    });
  }

  render() {
    return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
  }

  renderExternal() {
    return <bp-sdk-external-message-outlet answerId={this.answerId} />;
  }
  renderInternal() {
    return <div class="bp-sdk-message-outlet__container"></div>;
  }
}
