import { partnersList, productList } from './items';

const styles = `
  :host,
  :root {
    --default-font-family: 'Open Sans';
    --default-font-family: normal;
    --default-font-color: var(--color-grey-900);
    --default-font-weight: 400;
    --color-white: #fff;
    --color-black: #000;
    --color-grey-900: #353B48;
    --color-grey-500: #656D78;
    --color-grey-200: #E6E9ED;
    --color-grey-100: #F5F7FA;
    --color-blue-900: #124E8F;
    --color-blue-500: #2286E6;
    --color-blue-200: #A6CEF5;
    --color-blue-100: #E8F3FD;
    --theme-palette-primary-light: var(--color-blue-100);
    --theme-palette-paper-background: var(--color-white);
    --theme-palette-divider: var(--color-grey-100);
    --theme-palette-border: var(--color-grey-100);
    --theme-palette-border-hover: var(--color-grey-200);
    --border-radius: 5px;
    --border-width: 1px;
    --button-border-radius: var(--border-radius);
    --button-border-stroke:var(--border-width);
    --button-background-color: var(--theme-palette-paper-background);
    --button-background-color--hover: var(--color-grey-100);
    --button-border-color: var(--theme-palette-border);
    --button-border-color--hover: var(--theme-palette-border-hover);
    --button-border: var(--button-border-stroke) solid var(--button-border-color);
    --button-border--hover: var(--button-border-stroke) solid var(--button-border-color--hover);
    --button-title-color: var(--color-grey-900);
    --button-description-color: var(--color-grey-500);
    --button-title-font-size: 16px;
    --button-description-font-size: var(--color-grey-500);
    --button-title-font-size: var(--color-grey-900);
    --button-description-font-size: var(--color-grey-500);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    color: var(--default-font-color);
    line-height: var(--default-line-height);
  }
  .kabinet {
    display: none;
  }
  .kabinet.is-active {
    display: block;
  }
  .kabinet.is-visible .kabinet__wrapper {
    transform: translateX(0);
  }
  .kabinet.is-visible .kabinet__overlay {
    opacity: 0.3;
  }
  .kabinet__header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }
  .kabinet__close {
    margin: 0;
    padding: 0;
    height: 48px;
    width: 48px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: none;
    order: 0;
    flex-grow: 0;
  }
  .kabinet__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 500px;
    z-index: 9999;
    overflow: auto;
    transition: transform 0.3s;
    will-change: transform;
    background-color: white;
    display: flex;
    flex-direction: column;
    transform: translateX(103%); /* extra 3% because of box-shadow */
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
    box-sizing: border-box;
    align-items: center;
    padding: 6px 20px;
    border-left: 1px solid #E6E9ED;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
  }
  .kabinet__content {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    flex-grow: 1;
  }
  .kabinet__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s;
    will-change: opacity;
    background-color: black;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .kabinet__items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    flex: none;
    order: 0;
    flex-grow: 1;
    flex-wrap: wrap;
  }
  .kabinet__items .column {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
  }
  .kabinet__title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 9px 0px;
    gap: 8px;
    width: 100%;
    height: 36px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }
  .kabinet__title h1 {
    height: 18px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.2px;
    color: var(--default-font-color);
    flex: none;
    order: 0;
    flex-grow: 0;
  }
`;

const template = `
  <style>${styles}</style>
  <section class="kabinet kabinet--left" id="kabinet-name">
    <div class="kabinet__overlay" data-kabinet-close tabindex="-1"></div>
    <div class="kabinet__wrapper">
      <div class="kabinet__header">
        <button class="kabinet__close" data-kabinet-close aria-label="Close kabinet">
          <kabinet-icon icon="cross"></kabinet-icon>
        </button>
      </div>
      <div class="kabinet__content">
        <div class="kabinet__title">
          <h1>Brideline Apps</h1>
        </div>
        <div class="kabinet__items">
          ${
            productList.map((item, key) => (`
            <kabinet-button
                key=${key}
                href=${item.href}
                title=${item.title}
                description=${item.description}
                icon=${item.icon}
              ></kabinet-button>
            `)).join('')
          }
        </div>
        <div class="kabinet__title">
          <h1>Partners</h1>
        </div>
        <div class="kabinet__items">
          ${
            partnersList.map((item, key) => (
              `<kabinet-button
                key=${key}
                href=${item.href}
                title=${item.title}
                description=${item.description}
                icon=${item.icon}
              ></kabinet-button>
            `)).join('')
          }
        </div>
      </div>
    </div>
  </section>
`;

const tmpl = document.createElement('template');
tmpl.innerHTML = template;

class Drawer extends HTMLElement {
  instance: any;
  settings = {
    speedOpen: 50,
    speedClose: 350,
    activeClass: 'is-active',
    visibleClass: 'is-visible',
    selectorTarget: '[data-drawer-target]',
    selectorTrigger: '[data-drawer-trigger]',
    selectorClose: '[data-drawer-close]'
  };

  constructor () {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.append(tmpl.content.cloneNode(true));

    this.instance = this.shadowRoot?.querySelector('.kabinet');
    this.keydownHandler = this.keydownHandler.bind(this);
    this.openDrawer = this.openDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);

    this.init();
  }

  private init () {
    const overlay = this.shadowRoot?.querySelectorAll('[data-kabinet-close]');

    if (overlay) {
      for (let i = 0; i < overlay.length; ++i) {
        // Add listener for clicking on the overlay
        overlay[i].addEventListener('click', this.closeDrawer, false);
      }
    }

    // Add listener for keypressing on the document
    document.addEventListener('keydown', this.keydownHandler, false);

    this.triggerEvent('onInit');
  }

  private toggleAccessibility (event: any) {
    if (event.getAttribute('aria-expanded') === 'true') {
      event.setAttribute('aria-expanded', false);
    } else {
      event.setAttribute('aria-expanded', true);
    }
  }

  private isOpen () {
    return this.instance.classList.contains(this.settings.activeClass) || this.instance.classList.contains(this.settings.visibleClass);
  }

  private triggerEvent (event: string) {
    this.dispatchEvent(
      new CustomEvent(event, {
        bubbles: true
      })
    );
  }

  private keydownHandler (event: any) {
    if (event.key === 'Escape' || event.keyCode === 27) {
      this.closeDrawer();
      this.triggerEvent('onClose');
    }
  }

  public openDrawer () {
    if (!this.isOpen()) {
      this.instance?.classList.add(this.settings.activeClass);
      document.documentElement.style.overflow = 'hidden';

      setTimeout(() => {
        // @ts-ignore
        this.instance?.classList.add(this.settings.visibleClass);
      }, this.settings.speedOpen);
      // this.toggleAccessibility(this.instance);

      this.triggerEvent('onOpen');
    }
  }

  public closeDrawer () {
    if (this.isOpen()) {
      this.instance?.classList.remove(this.settings.visibleClass);
      document.documentElement.style.overflow = '';

      setTimeout(() => {
        // @ts-ignore
        this.instance?.classList.remove(this.settings.activeClass);
      }, this.settings.speedClose);
      this.triggerEvent('onClose');
    }
  }
}

export default Drawer;

declare global {
  interface HTMLElementTagNameMap {
    'kabinet-drawer': Drawer;
  }
}