import * as plugins from '../plugins.js';
import * as elements from '../elements/index.js';

import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
  directives
} from '@design.estate/dees-element';

import type { IdpViewcontainer } from '../views/viewcontainer.js';
import { IdpState } from '../states/idp.state.js';

@customElement('idp-welcome')
export class IdpWelcome extends DeesElement {
  viewContainer: IdpViewcontainer;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        color: #fff;
        font-family: 'Geist Sans';
      }
      :host([hidden]) {
        display: none;
      }

      .maincontainer {
        padding: 0px 16px;
      }

      .greeting {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        margin: 24px auto;
      }

      dees-button {
        margin-top: 16px;
        margin-bottom: 16px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <idp-centercontainer>
        <div class="maincontainer">
        ${directives.resolveExec(async () => {
          const idpState = await IdpState.getSingletonInstance();
          await idpState.idpClient.determineLoginStatus();
          const data = await idpState.idpClient.whoIs().catch();
          if (data?.user) {
            return html`
              <div class="greeting">Hello ${data.user.data.name}!</div>
              <dees-button
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/account');
                }}
                >Manage your account</dees-button
              >
              <dees-button
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/logout');
                }}
                >Logout</dees-button
              >
            `;
          }
          return html`
            Do you want to sign in or register?
            <dees-button
              @click=${async () => {
                const idpState = await IdpState.getSingletonInstance();
                idpState.domtools.router.pushUrl('/login');
              }}
              >Sign In</dees-button
            >
            <dees-button
              @click=${async () => {
                const idpState = await IdpState.getSingletonInstance();
                idpState.domtools.router.pushUrl('/register');
              }}
              >Register</dees-button
            >
          `;
        })}
        <dees-button @click=${() => {}}>Learn more about idp.global</dees-button>
        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
        <dees-button
          @click=${() => {
            window.open('https://code.foss.global/idp.global/idp.global', '_blank');
          }}
          >Get the Source Code</dees-button
        >
        </div>
      </idp-centercontainer>
    `;
  }

  public async show() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.show();
  }

  public async hide() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.hide();
  }
}