/**
 * imui.Dialog
 * @author jero
 * @date 2016-07-28
 */
import React, { Component } from 'react';
import { getScrollBarWidth, checkScrollbar } from './util';
import Icon from '../../icon';

function getInputProps(zIndex, addFlag) {
  const inputProps = {};

  if (typeof zIndex === 'number' && zIndex > 0) {
    if (addFlag) {
      zIndex += 1;
    }

    inputProps.style = {
      zIndex,
    };
  }

  return inputProps;
}

function Mask(props) {
  const { mask, zIndex } = props;
  const inputProps = getInputProps(zIndex);

  return mask ? (<div className="im-dialog-mask" {...inputProps}></div>) : null;
}

class Dialog extends Component {
  componentDidMount() {
    if (this.props.supportESC) {
      document.addEventListener('keyup', this.onEsc);
    }
  }

  componentWillUnmount() {
    const body = document.body;

    body.style.paddingRight = '';
    body.style.overflow = 'auto';

    if (this.props.supportESC) {
      document.removeEventListener('keyup', this.onEsc);
    }
  }

  parseScroll = (visible) => {
    const body = document.body;

    if (checkScrollbar() && visible) {
      body.style.paddingRight = `${getScrollBarWidth()}px`;
      body.style.overflow = 'hidden';
    } else {
      body.style.paddingRight = '';
      body.style.overflow = 'auto';
    }
  };

  onClose = () => {
    if (this.props.onBeforeClose() !== false) {
      // this.parseScroll(false);
      this.props.onClose();
    }
  };

  onEsc = (event) => {
    if (event.keyCode === 27) {
      this.onClose();
    }
  };

  getHeader = ({ title, closeable }) => {
    return (
      <div className="im-dialog-hd">
        {title ? <h3 className="im-dialog-hd-text">{title}</h3> : <h3 className="im-dialog-hd-text-empty"></h3>}
        {closeable ? <Icon onClick={this.onClose} className="im-dialog-hd-close" type="close" /> : ''}
      </div>
    );
  };

  getTips = ({ type, msg, subMsg }) => {
    return (
      <div className={`im-dialog-bd ${subMsg ? 'im-with-sub' : ''}`}>
        <p className="im-dialog-bd-msg-wrap">
          <Icon type={type} className="im-dialog-bd-icon" />
          <span className="im-dialog-bd-msg">{msg}<span className="im-dialog-bd-msg-sub">{subMsg}</span></span>
        </p>
      </div>
    );
  }

  componentWillReceiveProps(newState) {
    if (newState.visible !== this.props.visible) {
      this.parseScroll(newState.visible);
    }
  }

  render() {
    const { className, style, mask, width, title, zIndex, visible, button, closeable,
      type, msg, subMsg, size } = this.props;
    const inputProps = getInputProps(zIndex, true);

    if (!visible) {
      return null;
    }

    const Header = this.getHeader;
    const Tips = this.getTips;

    return (
      <div className={className} style={style}>
        <Mask mask={mask} zIndex={zIndex} />
        <div className="im-dialog-wrap" {...inputProps}>
          <div className={`im-dialog ${size}`} style={{ width }}>
            <Header {...{ title, closeable }} />
              {this.props.type ? <Tips {...{ type, msg, subMsg }} />
              : <div className="im-dialog-bd">{this.props.children}</div>}
            {Array.isArray(button) && button.length > 0 ? <div className="im-dialog-ft">{button}</div> : null}
          </div>
        </div>
      </div>
    );
  }
}

export default Dialog;