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

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

import { LeleAccountNavigation } from './navigation.js';

import * as views from './views/index.js';
import * as accountstate from '../../states/accountstate.js';

import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';


declare global {
  interface HTMLElementTagNameMap {
    'idp-accountcontent': IdpAccountContent;
  }
}

@customElement('idp-accountcontent')
export class IdpAccountContent extends DeesElement {

  public subrouter: plugins.deesDomtools.plugins.smartrouter.SmartRouter;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
        height: 100%;
        width: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
      }
      :host([hidden]) {
        display: none;
      }
      .main {
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: 0px;
      }

      lele-accountnavigation {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 100vh;
        width: 200px;
      }
      .viewcontainer {
        will-change: transform;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: calc(100vw - 200px);
        height: 100vh;
        overflow-y: scroll;
        overscroll-behavior: contain;
        transition: all 0.3s;
        opacity: 1;
      }

      .viewcontainer.changing {
        opacity: 0;
        transform: translateY(20px);
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="main">
        <lele-accountnavigation></lele-accountnavigation>
        <div class="viewcontainer">
          <!--<lele-accountview-subscription></lele-accountview-subscription>-->
        </div>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.firstUpdated(_changedProperties);
    await this.domtoolsPromise;
    this.subrouter = this.domtools.router.createSubRouter('/account');
    const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');

    const cleanupViews = async () => {
      for (const child of viewcontainer.children) {
        viewcontainer.removeChild(child);
      }
    };

    viewcontainer.append(new views.BaseView());
    console.log(`loaded base view`);

    this.subrouter.on('/org/:orgName/billing', async () => {
      viewcontainer.classList.add('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
      console.log('We are viewing the billing page');
      await cleanupViews();
      viewcontainer.append(new views.SubscriptionView());
      viewcontainer.classList.remove('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
    });

    this.subrouter._handleRouteState();
  }
}