app/ts_web/elements/account/navigation.ts

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

import * as plugins from '../../plugins.js';
import * as states from '../../states/accountstate.js';
import { IdpState } from '../../states/idp.state.js';

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

declare global {
  interface HTMLElementTagNameMap {
    'lele-accountnavigation': LeleAccountNavigation;
  }
}

@customElement('lele-accountnavigation')
export class LeleAccountNavigation extends DeesElement {
  @property()
  accessor options: { text: string; id: string }[] = [
    {
      id: '1',
      text: 'Apps',
    },
    {
      id: '2',
      text: 'Users',
    },
    {
      id: '3',
      text: 'Activity',
    },
    {
      id: '4',
      text: 'Billing & Subscription',
    },
  ];

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        color: ${cssManager.bdTheme('#333', '#fff')};
        padding: 10px;
        padding-left: 0px;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
        border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
      }
      :host([hidden]) {
        display: none;
      }

      .logo {
        font-family: 'Cal Sans';
        letter-spacing: 0.0125em;
        font-size: 16px;
        text-align: center;
        padding: 16px 0px 16px 0px;
        margin: -8px -8px -16px 0px;
        border-bottom: 1px solid #111111;
        cursor: default;
        position: relative;
        z-index: 10;
      }

      .logo:hover {
        background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
      }

      .commitinfo {
        text-align: center;
        position: absolute;
        bottom: 0px;
        left: 0px;
        font-family: 'Intel One Mono';
        width: 100%;
        font-size: 12px;
        padding: 8px;
        border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
        color: ${cssManager.bdTheme('#666', '#ccc')};
      }

      .navigationGroupLabel {
        width: min-content;
        white-space: nowrap;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 300;
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, orange, #44444400) 1;
        color: ${cssManager.bdTheme('#666', '#ccc')};
        margin-bottom: 5px;
        padding-top: 32px;
        padding-left: 10px;
        padding-bottom: 5px;
      }

      .navigationOption {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        font-weight: 500;
        padding: 8px;
        padding-left: 10px;
        margin-bottom: 5px;
        font-size: 14px;
      }

      .navigationOption:hover {
        cursor: default;
        background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
      }
      dees-input-dropdown {
        margin-top: 16px;
        margin-bottom: 16px;
        margin-left: 8px;
      }
    `,
  ];

  public async getAccountRouter() {
    const host = (this.getRootNode() as any).host;
    return (host as any).subrouter;
  }

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="commitinfo">idp.global v${commitinfo.version}</div>
      <div class="logo">idp.global</div>
      <div class="navigationGroupLabel">Account Settings</div>
      <div
        class="navigationOption"
        @click=${async () => {
          const subrouter = await this.getAccountRouter();
          subrouter.pushUrl('');
        }}
      >
        overview
      </div>
      <div
        class="navigationOption"
        @click=${async () => {
          const idpState = await IdpState.getSingletonInstance();
          idpState.domtools.router.pushUrl('/logout');
        }}
      >
        logout
      </div>
      <div
        class="navigationOption"
        @click=${async () => {
          
        }}
      >
        manage roles
      </div>
      <div
        class="navigationOption"
        @click=${async () => {
        }}
      >
        create an org
      </div>
      <div class="navigationGroupLabel">Organization Settings</div>
      <dees-input-dropdown
        .label=${'choose org:'}
        @selectedOption=${(eventArg: CustomEvent) => {
          const currentState = states.accountState.getState();
          states.accountState.dispatchAction(
            states.setSelectedOrg,
            currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
          );
        }}
      ></dees-input-dropdown>
      ${this.options.map((option) => {
        return html` <div class="navigationOption">${option.text}</div> `;
      })}
    `;
  }

  public firstUpdated() {
    const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
    const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
      if (!orgArg) {
        return null;
      }
      return {
        option: orgArg.data.name,
        key: orgArg.data.slug,
        payload: orgArg.data.slug,
      };
    };
    states.accountState
      .select((stateArg) => stateArg.organizations)
      .pipe(
        plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
          return orgArrayArg.map(orgToMenuEntry);
        })
      )
      .subscribe((menuEntries) => {
        deesInputDropdown.options = menuEntries;
      });
    states.accountState
      .select((stateArg) => stateArg.selectedOrg)
      .pipe(plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry))
      .subscribe((selectedOrgArg) => {
        deesInputDropdown.selectedOption = selectedOrgArg;
      });
  }
}