import React from 'react';
import bodyFreezer from '../../etc/body-freezer';
import './card.less';

/**\

    title: Card
    category: component
    description: full screen page that slides up, can contain arbitrary content
    props:
        className[String]: Additional classes to add to the component
        isOpen[Boolean]: Opens or closes the card. Default is false.
        header[String]: The header of the card
        left[Component]:
            A component floated left on the header. Usually a Button.
            Passing in a Button (or native button) will apply certain styles
            to the button.
        right[Component]: Like left, but on the right.

\**/
class Card extends React.Component {
    static defaultProps = {
        isOpen: false,
        header: '',
        left: null,
        right: null
    };

    componentDidMount() {
        this.node = this._div;
        this.attachListeners();
    }

    attachListeners() {
        /* istanbul ignore next: hard to test realistically */
        this.node.addEventListener('transitionend', (e) => {
            if (e.target !== this.node) {
                return;
            }

            if (!this.props.isOpen) {
                bodyFreezer.unfreeze();
            }
        });
    }

    componentWillReceiveProps(props) {
        if (props.isOpen && !this.props.isOpen) {
            bodyFreezer.freeze();
        }
    }

    render() {
        let classer = 'card';

        if (this.props.className) {
            classer += ` ${this.props.className}`;
        }

        if (this.props.isOpen) {
            classer += ' open';
        }

        return (
            <div ref={ (c) => (this._div = c) }
                className={ classer }>
                <div className="header">
                    <div className="container">
                        { this.props.left }
                        { this.props.header }
                        { this.props.right }
                    </div>
                </div>
                <div className="content">
                    <div className="container">
                        { this.props.children }
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;
