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

import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { IdpViewcontainer } from '../views/viewcontainer.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: 24px auto;
        padding: 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">
        Do you want to sign in or register?
        <dees-button @click=${() => {
          this.viewContainer.loadElement(elements.IdpLogincontainer);
        }}>Sign In</dees-button>
        <dees-button @click=${() => {}}>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>
    `;
  }
}