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 { OrgSelectModal, type IOrgSelectResult } from './org-select-modal.js';
import { CreateOrgModal } from './create-org-modal.js';
import { accountDesignTokens } from './sharedstyles.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,
    accountDesignTokens,
    css`
      :host {
        display: block;
        height: 100%;
        width: 100%;
        background: var(--background);
      }
      :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 ease;
        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');

    // Setup event listeners for modals
    this.addEventListener('open-org-select-modal', (async (e: CustomEvent) => {
      const result = await OrgSelectModal.show({
        targetPath: e.detail.targetPath,
        title: e.detail.title,
        description: e.detail.description,
      });
      if (result) {
        this.subrouter.pushUrl(result.path);
      }
    }) as EventListener);

    this.addEventListener('open-create-org-modal', async () => {
      const org = await CreateOrgModal.show();
      if (org) {
        this.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
      }
    });

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

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

    this.subrouter.on('', async () => {
      viewcontainer.classList.add('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
      console.log('We are viewing the account overview');
      await cleanupViews();
      viewcontainer.append(new views.BaseView());
      viewcontainer.classList.remove('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
    });

    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.on('/org/:orgName/paddlesetup', async () => {
      viewcontainer.classList.add('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
      console.log('We are viewing the paddle setup page');
      await cleanupViews();
      viewcontainer.append(new views.PaddleSetupView());
      viewcontainer.classList.remove('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
    });

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

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

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

    this.subrouter._handleRouteState();

    this.registerGarbageFunction(async () => {
      this.subrouter.destroy();
    })
  }

  
}