import EventEmitter from 'eventemitter3';
import { Icons } from './icons';

interface FooterViewEvents {
    prevPage: () => void;
    nextPage: () => void;
    prevStep: () => void;
    nextStep: () => void;
    sideBarToggle: () => void;
}

const EM_COLOR = '#8C8C8C';

export class FooterView extends EventEmitter<FooterViewEvents> {

  public readonly root: HTMLDivElement;

  private nextStep: HTMLDivElement;
  private pauseIcon: HTMLDivElement;

  private prevPage: HTMLDivElement;
  private nextPage: HTMLDivElement;

  private sideBarToggle: HTMLDivElement;

  private currentPageIndex: number = 0;
  private totalPageIndex: number = 0;
  private pageIndexContainer: HTMLDivElement;

  private eventMap: Map<HTMLDivElement, (() => void)[]> = new Map();

  public constructor() {
    super();
    this.root = document.createElement('div');
    this.root.classList.add('forge-slide-footer');
    this.root.style.padding = '0 16px 0 0';
    this.root.style.height = '24px';
    this.root.style.zIndex = '6';
    this.root.style.display = 'flex';
    this.root.style.alignItems = 'center';
    this.root.style.justifyContent = 'center';
    this.root.style.backgroundColor = '#fff';


    this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
      this.emit('prevPage');
    });

    this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
      this.emit('nextStep');
    });

    this.pauseIcon = this.createIcon(Icons.pause(EM_COLOR), () => {

    });
    this.pauseIcon.style.display = 'none';

    this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
      this.emit('nextPage');
    });

    this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), () => {
      this.emit('sideBarToggle');
    });


    this.pageIndexContainer = this.createPageNumber();

    this.root.appendChild(this.sideBarToggle);
    this.root.appendChild(this.createSpacer());
    this.root.appendChild(this.prevPage);
    this.root.appendChild(this.nextStep);
    this.root.appendChild(this.pauseIcon);
    this.root.appendChild(this.nextPage);
    this.root.appendChild(this.createSpacer());
    this.root.appendChild(this.pageIndexContainer);
  }

  public changeIconToPause(): void {
    this.nextStep.style.display = 'none';
    this.pauseIcon.style.display = 'block';
  }

  public changeIconToNextStep(): void {
    this.nextStep.style.display = 'block';
    this.pauseIcon.style.display = 'none';
  }

  public setCurrentPageIndex(index: number): void {
    this.currentPageIndex = index;
    this.pageIndexContainer.textContent = `${this.currentPageIndex} / ${this.totalPageIndex}`;
  }

  public setTotalPageIndex(count: number): void {
    this.totalPageIndex = count;
  }

  public prevPageState(enable: boolean): void {
    if (enable) {
      this.prevPage.style.pointerEvents = 'all';
      this.prevPage.style.opacity = '1';
    } else {
      this.prevPage.style.pointerEvents = 'none';
      this.prevPage.style.opacity = '0.5';
    }
  }

  private createSpacer(): HTMLDivElement {
    const div = document.createElement('div');
    div.style.flex = '1 1 auto';
    return div;
  }

  private createPageNumber(): HTMLDivElement {
    const div = document.createElement('div');
    div.style.fontSize = '13px';
    div.style.margin = '6px';
    div.style.color = '#191919';
    div.style.fontFamily = 'system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"';
    div.style.fontWeight = '400';
    div.style.lineHeight = '18px';
    div.style.userSelect = 'none';
    return div;
  }

  private createIcon(svgContent: string, action: () => void): HTMLDivElement {
    const icon = document.createElement('div');
    icon.style.width = '18px';
    icon.style.height = '18px';
    icon.style.borderRadius = '2px';
    icon.style.margin = '6px';
    icon.innerHTML = svgContent;
    const onClickHandle = () => {
      action();
    };
    const onMouseOverHandle = () => {
      icon.style.backgroundColor = '#f0f0f0';
    };
    const onMouseOutHandle = () => {
      icon.style.backgroundColor = 'transparent';
    };
    icon.addEventListener('click', onClickHandle);
    icon.addEventListener('mouseover', onMouseOverHandle);
    icon.addEventListener('mouseout', onMouseOutHandle);
    this.eventMap.set(icon, [onClickHandle, onMouseOutHandle, onMouseOverHandle]);
    return icon;
  }

  private clearHTMLEventListeners() {
    this.eventMap.forEach((value, key) => {
      if (key) {
        const [clickEvent, mouseOutEvent, mouseOverEvent] = value;
        key.removeEventListener('click', clickEvent);
        key.removeEventListener('mouseover', mouseOverEvent);
        key.removeEventListener('mouseout', mouseOutEvent);
      }
    });
  }

  dispose() {
    this.removeAllListeners();
    this.clearHTMLEventListeners();
  }
}