import { SlideApplicationOption } from './SlideApplication';
import EventEmitter from 'eventemitter3';

interface SideBarViewEvents {
    pageChange: (index: number) => void;
}

export class SideBarView extends EventEmitter<SideBarViewEvents> {
  public readonly root: HTMLDivElement = document.createElement('div');
  private isShow: boolean = false;
  private eventsMap: Map<HTMLDivElement, (() => void)[]> = new Map();

  public constructor() {
    super();
    this.root.style.backgroundColor = '#eee';
    this.root.className = 'forge-slide-sidebar';
    this.root.style.width = '240px';
    this.root.style.height = '100%';
    this.root.style.position = 'absolute';
    this.root.style.left = '-240px';
    this.root.style.top = '0';
    this.root.style.zIndex = '5';
    this.root.style.transition = 'left 0.3s ease-in-out';
    this.root.style.overflow = 'auto';
    this.root.style.display = 'flex';
    this.root.style.flexDirection = 'column';
    this.root.style.justifyContent = 'flex-start';
    this.root.style.alignItems = 'center';
  }

  get isShowSideBar(): boolean {
    return this.isShow;
  }

  public initialize(slideCount: number, option: SlideApplicationOption): void {
    for (let i = 1; i <= slideCount; i++) {
      const itemContainer = document.createElement('div');
      itemContainer.style.width = '60%';
      itemContainer.style.display = 'flex';
      itemContainer.style.justifyContent = 'center';
      itemContainer.style.alignItems = 'flex-start';
      itemContainer.style.position = 'relative';
      itemContainer.style.borderRadius = '4px';
      itemContainer.style.transition = 'border-color .3s';
      itemContainer.style.marginBottom = '10px';
      
      const onMouseOverHandle = () => {
        itemContainer.style.borderColor = '#ccc';
      };
      const onMouseOutHandle = () => {
        itemContainer.style.borderColor = 'transparent';
      };
      const onClickHandle = () => {
        this.emit('pageChange', i);
      };

      itemContainer.addEventListener('click', onClickHandle);
      itemContainer.addEventListener('mouseover', onMouseOverHandle);
      itemContainer.addEventListener('mouseout', onMouseOutHandle);
      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);

      const pageIndex = document.createElement('span');
      pageIndex.textContent = `${i}`;
      pageIndex.style.position = 'absolute';
      pageIndex.style.top = '1px';
      pageIndex.style.left = '-10px';
      pageIndex.style.transform = 'translate(-100%)';
      pageIndex.style.fontSize = '12px';
      pageIndex.style.color = '#5f5f5f';

      const preview = document.createElement('img');
      preview.style.width = '100%';
      preview.style.display = 'inline-block';
      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;

      itemContainer.appendChild(preview);
      itemContainer.appendChild(pageIndex);

      this.root.appendChild(itemContainer);
    }
  }

  public hidden() {
    if (!this.root) {
      return;
    }
    this.root.style.left = '-240px';
    this.root.style.border = 'none';
    this.root.style.boxShadow = 'none';
    this.isShow = false;
  }

  public show() {
    if (!this.root) {
      return;
    }
    this.root.style.left = '0';
    this.root.style.border = '1px solid #ccc';
    this.root.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
    this.isShow = true;
  }

  public dispose() {
    this.removeAllListeners();
    this.eventsMap.forEach((handlers, element) => {
      const [clickEvent, mouseOverEvent, mouseOutEvent] = handlers;
      element.removeEventListener('click', clickEvent);
      element.removeEventListener('mouseover', mouseOverEvent);
      element.removeEventListener('mouseout', mouseOutEvent);
    });
  }

}