/// <reference path="./definition.d.ts" />

import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import { getTranslateText } from '../util/animation';

const element = {};
const prefix = 'tsp-component-Popup';
class Popup extends React.Component<TspComponentPopupProps, any> {
  constructor(props: TspComponentPopupProps, state: any) {
    super(props, state);

    this.onClose = this.onClose.bind(this);
  }

  public static defaultProps: TspComponentPopupProps = {
    id: '',
    direction: 'top'
  };

  private elem: HTMLElement;

  public componentDidMount(): void {
    this.elem = this.refs['popup'] as HTMLElement;
    element[this.props.id] = this.elem;

    this.elem.dataset.direction = this.props.direction;
    this.elem.style.cssText = getTranslateZWithDirection(this.elem, 'close');
  }

  public componentWillUnmount(): void {
    document.body.style.cssText = `height:auto;overflow: visible;`;
  }

  public onClose(e: any): void {
    popupClose(this.props.id);
    if (this.props.onClose) {
      this.props.onClose(e);
    }
  }

  public render(): JSX.Element {
    return (
      <div
        id={this.props.id}
        className={classNames({
          [prefix]: true,
          [this.props.className]: this.props.className
        })}
        ref="popup"
      >
        <Hammer onTap={this.onClose}>
          <div className={`${prefix}-mask`} />
        </Hammer>
        {this.props.children}
      </div>
    );
  }
}

/**
 * 打开
 */
function popupOpen(id: string): void {
  const elem = element[id];
  const translate = getTranslateZWithDirection(elem, 'open');
  const scrollElem = document.querySelector('.tsp-component-Scroll');

  if (scrollElem) {
    scrollElem['style'].webkitTransform = 'none';
  }

  elem.classList.add(`${prefix}-transition`);
  elem.style.cssText = `top: 0;left: 0;visibility: visible;${translate}`;
  document.body.style.cssText = `height: ${document.documentElement.clientHeight}px;overflow: hidden;`;
}

function popupClose(id: string): void {
  const elem = element[id];

  if (!elem) {
    return;
  }

  const translate = getTranslateZWithDirection(elem, 'close');
  const scrollElem = document.querySelector('.tsp-component-Scroll');

  if (scrollElem) {
    scrollElem['style'].webkitTransform = 'translateZ(0)';
  }

  elem.style.cssText = `top: 0;left: 0;visibility: visible;${translate}`;
  setTimeout(() => {
    elem.classList.remove(`${prefix}-transition`);
    elem.style.cssText = `top: -9999px;left: -9999px;visibility: hidden;${translate}`;
    document.body.style.cssText = `height:auto;overflow: visible;`;
  }, 280);
}

/**
 * 根据elemnt的dataset.direction设置translateZ
 */
function getTranslateZWithDirection(elem: HTMLElement, status: 'open' | 'close'): string {
  let translate = getTranslateText('-100%', '-100%');

  if (elem) {
    const direction = elem.dataset.direction;

    switch (direction) {
      case 'top': translate = getTranslateText(0, status === 'open' ? 0 : '100%'); break;
      case 'right': translate = getTranslateText(status === 'open' ? 0 : '100%', 0); break;
      case 'bottom': translate = getTranslateText(0, status === 'open' ? 0 : '-100%'); break;
      case 'left': translate = getTranslateText(status === 'open' ? 0 : '-100%', 0); break;
      default: break;
    }
  }

  return translate;
}

export { Popup, popupOpen, popupClose } ;