/**
* @componentName  Modal
* @describe   --  模态框弹窗，支持自定义传入样式
* @ues 列表组件
* @author Danile
* @since  2019.08.09 开发完成
*
*/


import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import classNames from 'classnames';

import '../../styles/components/modal.scss';

/**
 * 【props】
 * @param {Array<string> | string} className - 自定义的className
 * @param {object | string} customStyle
 * @param {boolean} isOpened - Modal弹窗的关闭隐藏
 * @param {boolean} touchClose - 触摸关闭
 * @param {() => {}} onClose - 弹窗关闭之后，回调事件
 *
 * */

/**
 * 【state】
 * @param {boolean} touchCloseModal - 点击模态框则可以进行关闭
 * @param {boolean} statusVisibleModal - modal是否可见状态 true - 打开； false - 关闭
 */

interface IProps {
  className?: Array<string> | string;
  customStyle?: object | string;
  isOpened?: boolean;
  touchClose?: boolean;
  onClose: () => void;
}

interface IState {
  isOpenModal: boolean;
  touchCloseModal: boolean;
  statusVisibleModal: boolean;
}

class TctModal extends Component<IProps, IState> {
  constructor(props) {
    super(props);
  }

  state = {
    isOpenModal: this.props.isOpened || false,
    touchCloseModal: false,
    statusVisibleModal: false,
  };

  componentDidShow() {
    console.log('onShow', '-------------');
  }

  componentWillReceiveProps(props) {
    const { isOpened } = props;
    this._recordVisibleModal(isOpened);
  }

  _stopPropagation = (e) => {
    e.stopPropagation();
    this.setState({ touchCloseModal: true }, () => {
      const { isOpened } = this.props;
      this._recordVisibleModal(isOpened);
    });
  };

  /**
   * 控制弹层后面的页面元素不能滑动
   */
  _onTouchMove = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  /**
   * 记录modal的开启或者关闭状态
   * false - 关闭状态
   * true - 开启状态
   *
   */
  _recordVisibleModal = (isOpened) => {
    const { touchCloseModal } = this.state;
    const { touchClose } = this.props;

    console.log(isOpened, '%%%%%%%%%%');

    /**
     * isOpened - true && touchCloseModal - false
     */
    if (isOpened && !touchCloseModal) {
      this.setState({ statusVisibleModal: true });
    }
    /**
     * 触摸模态框关掉
     *
     * props - touchClose 父组件传入是否可以点弹层则可以关闭
     * state - touchCloseModal 控制弹层关闭的状态
     */
    if (touchCloseModal && touchClose) {
      this.setState({ statusVisibleModal: false }, () => {
        this.setState({ touchCloseModal: false });
        this._onClose();
      });
    }
  };

  /**
   * 暴露关闭弹窗后的onClose事件
   */
  _onClose = () => {
    const { onClose } = this.props;
    onClose();
  };

  render() {
    const { className, customStyle } = this.props;
    const { statusVisibleModal } = this.state;

    console.log(statusVisibleModal, '!!!!!!!!');

    const curtainClass = classNames(
      {
        'tct-modal': true,
        'tct-modal--closed': !statusVisibleModal,
      },
      className,
    );

    return (
      <View>
        <View
          className={curtainClass}
          style={customStyle}
          onClick={this._stopPropagation}
          onTouchMove={this._onTouchMove}
        >
          {this.props.children}
        </View>
      </View>
    );
  }

  static defaultProps = {
    className: '',
    customStyle: '',
    isOpened: false,
    touchClose: false,
    onClose: () => {},
  };
}

export default TctModal;