import { getCookieLayoutObj, setCookieLayoutObj } from '../../mmui-web';

export class MmuiEmbeddedSidePanelComponent {
  width;
  widthSpeedOpen;
  widthSpeedClose;
  opacitySpeedOpen;
  opacitySpeedClose;
  sidePanel;
  cookieEntryName;

  constructor(panelSelector, cookieEntryName, config: any = {}) {
    this.width = config.width ? config.width : 100;
    this.widthSpeedOpen = config.widthSpeedOpen
      ? `transition: width ${config.widthSpeedOpen}s`
      : '';
    this.widthSpeedClose = config.widthSpeedClose
      ? `transition: width ${config.widthSpeedClose}s`
      : '';
    this.opacitySpeedOpen = config.opacitySpeedOpen
      ? config.opacitySpeedOpen
      : 1.0;
    this.opacitySpeedClose = config.opacitySpeedClose
      ? config.opacitySpeedClose
      : 1.0;
    this.sidePanel = document.querySelector(panelSelector);
    this.cookieEntryName = cookieEntryName;
    // this.sidePanel.addEventListener('transitionend', (evt) => {
    //     if (this.sidePanel.getAttribute('style').includes('width: 0')) {
    //         this.sidePanel.style.display = 'none';
    //     }
    // });
  }

  open() {
    const pageObj = getCookieLayoutObj();
    // this.sidePanel.style = `width: ${this.width}px; opacity: 100; ${this.widthSpeedOpen}, opacity ${this.opacitySpeedOpen}s;`;
    this.sidePanel.style = `width: ${this.width}px; opacity: 100;`;
    this.sidePanel.style.display = 'block';
    pageObj[this.cookieEntryName] = 'open';
    setCookieLayoutObj(pageObj);
  }

  close() {
    const pageObj = getCookieLayoutObj();
    // this.sidePanel.style = `width: 0; opacity: 0; ${this.widthSpeedClose}, opacity ${this.opacitySpeedClose}s; overflow: hidden;`;
    this.sidePanel.style = `width: 0; opacity: 0;`;
    this.sidePanel.style.display = 'none';
    pageObj[this.cookieEntryName] = 'closed';
    setCookieLayoutObj(pageObj);
  }
}