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

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

@customElement('idp-welcome')
export class IdpWelcome extends DeesElement {
  @property()
  public someProperty = 'someProperty';

  constructor() {
    super();
  }

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

      h1 {
        text-align: center;
        letter-spacing:0.0125em;
      }

      .textbox {
        margin: 24px auto;
        width: 500px;
        background: #111111;
        border-radius: 8px;
        padding: 24px;
      }

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

  public render(): TemplateResult {
    return html`
      <style></style>
      <h1>idp.global</h1>
      <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.location.href = 'https://code.foss.global/idp.global/idp.global';
        }}>Get the code</dees-button>
      </div>
      <div class="textbox">
        Do you want to sign in or register?
        <dees-button @click=${() => {}}>Sign In</dees-button>
        <dees-button @click=${() => {}}>Register</dees-button>
      </div>
    `;
  }
}