import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import {
  css,
  cssManager,
  customElement,
  DeesElement,
  html,
  state,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('sg-view-tokens')
export class SgViewTokens extends DeesElement {
  @state()
  accessor tokensState: appstate.ITokensState = { tokens: [] };

  @state()
  accessor organizationsState: appstate.IOrganizationsState = {
    organizations: [],
    currentOrg: null,
    repositories: [],
    members: [],
  };

  constructor() {
    super();
    const tokenSub = appstate.tokensStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.tokensState = s;
      });
    this.rxSubscriptions.push(tokenSub);

    const orgSub = appstate.organizationsStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.organizationsState = s;
      });
    this.rxSubscriptions.push(orgSub);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await appstate.tokensStatePart.dispatchAction(appstate.fetchTokensAction, {});
    await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
  }

  public render(): TemplateResult {
    return html`
      <sg-tokens-view
        .tokens="${this.tokensState.tokens}"
        .organizations="${this.organizationsState.organizations}"
        @create="${(e: CustomEvent) => this.createToken(e.detail)}"
        @revoke="${(e: CustomEvent) => this.revokeToken(e.detail.tokenId)}"
      ></sg-tokens-view>
    `;
  }

  private async createToken(detail: any) {
    await appstate.tokensStatePart.dispatchAction(appstate.createTokenAction, detail);
  }

  private async revokeToken(tokenId: string) {
    await appstate.tokensStatePart.dispatchAction(appstate.revokeTokenAction, { tokenId });
  }
}