/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '../gr-endpoint-decorator/gr-endpoint-decorator';
import '../gr-endpoint-param/gr-endpoint-param';
import {LitElement, html} from 'lit';
import {subscribe} from '../../lit/subscription-controller';
import {resolve} from '../../../models/dependency';
import {pluginViewModelToken} from '../../../models/views/plugin';
import {customElement, state} from 'lit/decorators.js';
import {keyed} from 'lit/directives/keyed.js';

@customElement('gr-plugin-screen')
export class GrPluginScreen extends LitElement {
  @state() screen?: string;

  @state() screenName?: string;

  private readonly getPluginViewModel = resolve(this, pluginViewModelToken);

  constructor() {
    super();

    subscribe(
      this,
      () => this.getPluginViewModel().state$,
      state => {
        this.screen = state.screen;
      }
    );
    subscribe(
      this,
      () => this.getPluginViewModel().screenName$,
      screenName => {
        this.screenName = screenName;
      }
    );
  }

  override render() {
    return keyed(
      this.screenName,
      html`
        <gr-endpoint-decorator .name=${this.screenName}>
          <gr-endpoint-param
            name="token"
            .value=${this.screen}
          ></gr-endpoint-param>
        </gr-endpoint-decorator>
      `
    );
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'gr-plugin-screen': GrPluginScreen;
  }
}