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

import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';

const prefix = 'component-Modal';
const Modal = (props: TspComponentModalProps) => {
  let cancleButton = null;
  const onOk = function(): void {
    if (props.onOk) {
      props.onOk();
    } else {
      props.onCancel();
    }
  };
  const okButton = (
    <button
      id={props.id}
      className={classNames({
        [`${prefix}-box-action-btn`]: true,
        [`${prefix}-box-actioo-ok`]: true,
        [`${prefix}-box-action-onlyOk`]: props.onlyOk
      })}
      onClick={onOk}
      type={props.submit ? 'submit' : 'button'}
    >{props.okLabel ? props.okLabel : '确定'}</button>
  );
  if (!props.onlyOk) {
    cancleButton = (
      <Hammer onTap={props.onCancel}>
        <div className={`${prefix}-box-action-btn ${prefix}-box-action-cancel`}>
          {props.cancelLabel ? props.cancelLabel : '取消'}
        </div>
      </Hammer>
    );
  }
  if (props.visible) {
    document.body.style.cssText = `height: ${document.documentElement.clientHeight}px;overflow: hidden;`;
  } else {
    document.body.style.cssText = `height:auto;overflow: visible;`;
  }
  return (
    <div
      className={classNames({
        [prefix]: true,
        [props.className]: props.className
      })}
      style={{ display: props.visible ? 'block' : 'none' }}
    >
      <div className={`${prefix}-mask`} />
      <div className={`${prefix}-box`}>
        <div className={`${prefix}-box-head`}>{props.title}</div>
        <div className={`${prefix}-box-body`}>{props.children}</div>
        <div className={`${prefix}-box-action`}>
          {props.reverse ? okButton : null}
          {props.reverse ? cancleButton : null}
          {!props.reverse ? cancleButton : null}
          {!props.reverse ? okButton : null}
        </div>
      </div>
    </div>
  );
};

export default Modal;