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

import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  resolveExec,
  type TemplateResult,
} 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;
      }

      h1 {
        font-family: 'Cal Sans';
        text-align: center;
        font-size: 24px;
        margin: 0px auto;
        padding: 24px 24px 0px 24px;
        width: 500px;
        letter-spacing: 0.0125em;
      }

      .textbox {
        margin: 24px auto;
        width: 500px;
        background: #111111;
        border-radius: 16px;
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
        padding: 24px;
      }

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

  public render(): TemplateResult {
    return html`
      <style></style>
      <h1>idp.global</h1>

      <div class="textbox">
        ${resolveExec(async () => {
          const idpState = await IdpState.getSingletonInstance();
          await idpState.idpClient.determineLoginStatus();
          const data = await idpState.idpClient.whoIs().catch();
          if (data?.user) {
            return html`
              Hello ${data.user.data.name}!
              <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
            >
          `;
        })}
      </div>

      <div class="textbox">
        Do you want to use idp.global for your app?
        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
      </div>

      <div class="textbox">
        idp.global is a Open Source identity provider for the world wide web. You can get the code
        if you want to improve it.
        <dees-button
          @click=${() => {
            window.open('https://code.foss.global/idp.global/idp.global', '_blank');
          }}
          >Get the code</dees-button
        >
      </div>
    `;
  }
}