/**
 * 模态框
 * Created by DELL on 2018/4/24.
 */
import React, {Component} from "react";
/*import PropTypes from 'prop-types';*/
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import {$$} from '@lib';

// import $ from "jquery";
import ModalHeader from "./header/ModalHeader.jsx";
import ModalBody from "./body/ModalBody.jsx";
import ModalFooter from "./footer/ModalFooter.jsx";

import styles from "./index.less";

/*const propTypes = {
    autoResizeHeight: PropTypes.bool,
    overflow: PropTypes.bool,
    onClickCancel: PropTypes.func,
    onClickConfirm: PropTypes.func,
    onClickClose: PropTypes.func
}
const defaultProps = {
    overflow: true,
    autoResizeHeight: true
};*/

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalStyle : {},
            bodyStyles: {},
            maxHeight: null,
            overflow: null,
            show: this.props.show || true
        }
        
        this.handleConfirm = this.handleConfirm.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.handleClose = this.handleClose.bind(this);
        
        this.handleWindowResize = this.handleWindowResize.bind(this);
        this.getStyles = this.getStyles.bind(this);
    }
    handleConfirm() {
        this.setState({
            show: false
        });
        const {onClickConfirm} = this.props;
        onClickConfirm && onClickConfirm();
    }
    handleCancel() {
        this.setState({
            show: false
        });
        const {onClickCancel} = this.props;
        onClickCancel && onClickCancel();
        
    }
    handleClose() {

        const that = this;
        const {onClickClose} = this.props;
        onClickClose && onClickClose(function () {
            that.setState({
                show: false
            });
        });
    }
    getStyles() {
        const styles = {};
        const {autoResizeHeight} = this.props;
        if (autoResizeHeight) {
            const excludeHeight = 150;
            const contentHeight = $$.getHeight(window) - excludeHeight;

            styles.bodyStyles = {
              maxHeight: contentHeight
            };
        }
        return styles;
    }
    handleWindowResize() {
        this.setState(this.getStyles());
    }
    componentDidMount() {
       this.setState(this.getStyles());
       $$.$window.on("resize", this.handleWindowResize);
    }
    render() {
        const {
            width,
            title,
            overflow,
            noFooter,
            children
        } = this.props;
        
        this.state.modalStyle= {
            display: this.state.show ? "block" : "none",
            padding: "0 20px"
        };

        let maxHeight = this.state.bodyStyles.maxHeight;
        
        let contentClass = classNames(`${styles['content']}`);
        return (
            <div style={this.state.modalStyle} ref={(ref) => {this.dialog = ref;}} >
                <div className={styles['backdrop']}></div>
                <div className={contentClass} style={{width,  height:maxHeight}} >
                    <ModalHeader title={title||"title"} handleClose={this.handleClose}/>
                    <ModalBody children={children} overflow={overflow}/>
                    {noFooter ? null : <ModalFooter handleCancel={this.handleCancel} handleConfirm={this.handleConfirm}/>}
                </div>
            </div>
        );
    }
}

/*Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;*/

Modal.header = ModalHeader;
Modal.body = ModalBody;
Modal.footer = ModalFooter;

export default Modal;