import React from "react";
const classNames = require("classnames");
import styles from "./styles.less";
interface ModalProps {
  visible?: boolean;
  title?: string;
  content?: string;
  initCb?: any;
  closeCb?: any;
}
interface ModalState {
  visible?: boolean;
}

export default class DownModal extends React.Component<ModalProps, ModalState> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: true,
    };
  }
  updateStates = (data: any) => {
    this.setState({
      ...data,
    });
  };
  controlBodyScroll = (bool: any) => {
    let bodyEl = document.body;
    if (bool) {
      bodyEl.style.overflow = "hidden";
      bodyEl.style.height = "100%";
    } else {
      bodyEl.style.overflow = "";
      bodyEl.style.height = "";
    }
  };
  componentDidMount() {
    this.controlBodyScroll(true);
    const { visible = this.state.visible, initCb } = this.props;
    initCb && initCb();
    this.updateStates({
      visible,
    });
  }
  closeModal = () => {
    this.controlBodyScroll(false);
    const { closeCb } = this.props;
    closeCb && closeCb();
    this.setState({
      visible: false,
    });
  };
  render() {
    const { visible } = this.state;
    const modalClass = classNames(
      visible ? `${styles.modal} ${styles.modalshow}` : `${styles.modal}`
    );

    const { title, content = "" } = this.props;
    const innerHtml = { __html: content };
    if (!visible) {
      return null;
    }
    return (
      <div className={styles.mask} id="content" onClick={this.closeModal}>
        <div className={modalClass} onClick={(e) => e.stopPropagation()}>
          <header className={styles.header}>
            <span className={styles.title}>{title}</span>
            <span className={styles.closeicon} onClick={this.closeModal}></span>
          </header>
          <section
            className={styles.content}
            dangerouslySetInnerHTML={innerHtml}
          ></section>
        </div>
      </div>
    );
  }
}