import * as plugins from './00plugins.js';
import * as interfaces from './interfaces/index.js';

import { DeesContextmenu } from './dees-contextmenu.js';

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

/**
 * the property selector menu
 * mainly used to select assets within in an organization
 */
@customElement('dees-appui-mainselector')
export class DeesAppuiMainselector extends DeesElement {
  public static demo = () => html`<dees-appui-mainselector></dees-appui-mainselector>`;

  // INSTANCE
  @property()
  public selectionOptions: interfaces.ISelectionOption[] = [
    {
      key: 'Overview',
      action: () => {},
    },
    {
      key: 'option 1',
      action: () => {},
    },
    { key: 'option 2', action: () => {} },
    { key: 'option 3', action: () => {} },
    { key: 'option 4', action: () => {} },
  ];

  @property()
  public selectedOption: interfaces.ISelectionOption = null;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: #fff;
        position: relative;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 100%;
        background: #000000;
        border-right: 1px solid #222222;
      }
      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
      }

      .topbar {
        position: absolute;
        height: 32px;
        width: 100%;
      }

      .topbar .heading {
        padding-left: 16px;
        padding-top: 8px;
        line-height: 24px;
        font-family: 'Geist Sans', sans-serif;
        font-weight: 600;
        font-size: 14px;
      }

      .selectionOptions {
        position: absolute;
        top: 32px;
        padding-top: 8px;
        left: 0px;
        width: 100%;
        font-family: 'Geist Sans', sans-serif;
        font-size: 14px;
      }

      .selectionOptions .selectionOption {
        cursor: default;
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-top: 1px dotted #303030;
        border-left: 0px solid rgba(0, 0, 0, 0);
        transition: all 0.1s;
      }

      .selectionOptions .selectionOption:hover {
        border-left: 2px solid #26a69a50;
        padding-left: 8px;
      }

      .selectionOptions .selectionOption:first-child {
        border-top: 1px solid rgba(0, 0, 0, 0);
      }

      .selectionOptions .selectionOption.selectedOption {
        border-left: 4px solid #26a69a;
        padding-left: 10px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Properties</div>
        </div>
        <div class="selectionOptions">
          ${this.selectionOptions.map((selectionOptionArg) => {
            return html`
              <div
                class="selectionOption ${this.selectedOption === selectionOptionArg
                  ? 'selectedOption'
                  : null}"
                @click="${() => {
                  this.selectOption(selectionOptionArg);
                }}"
                @contextmenu="${(eventArg: MouseEvent) => {
                  DeesContextmenu.openContextMenuWithOptions(eventArg, [
                    {
                      name: 'property settings',
                      action: async () => {},
                      iconName: 'gear',
                    },
                  ]);
                }}"
              >
                ${selectionOptionArg.key}
              </div>
            `;
          })}
        </div>
      </div>
    `;
  }

  private selectOption(optionArg: interfaces.ISelectionOption) {
    this.selectedOption = optionArg;
    this.selectedOption.action();
  }

  firstUpdated() {
    this.selectOption(this.selectionOptions[0]);
  }
}