import React from 'react';
import ReactDOM from 'react-dom';
import { VelocityComponent } from 'velocity-react';
import bodyFreezer from '../../etc/body-freezer';
import Button from '../../atoms/button';
import './pane.less';

/**\

    title: Pane
    category: component
    description:
        A pane that slides in from any side containing arbitrary content.
    props:
        className[String]: Additional classes to add to the component
        isOpen[Boolean]: Opens or closes the pane. Default is false.
        header[String]: The header of the card
        onClickClose[Function]: A callback for when the 'X' is clicked.
        fromSide[String]: The side that the pane comes out from.
    notes:
        by default, the top of the pane is at 70px from the top of the window.
        set the top css property of the pane to adjust this.

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

    static propTypes = {
        className: React.PropTypes.string,
        isOpen: React.PropTypes.bool,
        header: React.PropTypes.string,
        onClickClose: React.PropTypes.func,
        fromSide: React.PropTypes.oneOf([ 'left', 'right' ])
    };

    componentDidMount() {
        this.node = ReactDOM.findDOMNode(this);
        this.attachListeners();
    }

    attachListeners() {
        /* istanbul ignore next: test manually */
        this.keyDownListener = (evt) => {
            if (evt.key === 'Escape' || evt.keyCode === 27) {
                this.onClickClose();
            }
        };

        /* istanbul ignore next: test manually */
        this.clickOutsideListener = (evt) => {
            if (evt.target.className === 'pane open') {
                this.onClickClose();
            }
        };

        // listen for clicks outside of pane
        this.node.addEventListener('click', this.clickOutsideListener, true);

        // listen for Esc key event and treat it like clicking 'X'
        window.addEventListener('keydown', this.keyDownListener, true);
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', this.keyDownListener);
    }

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

    onClickClose() {
        const { onClickClose, isOpen } = this.props;

        if (!isOpen) {
            return;
        }

        bodyFreezer.unfreeze();

        if (typeof onClickClose === 'function') {
            onClickClose();
        }
    }

    render() {
        const { className, isOpen, header, children, fromSide } = this.props,
            xPercent = fromSide === 'left' ? '100%' : '-100%';
        let classer = 'pane';

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

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

        return (
            <VelocityComponent
                animation={ { visibility: isOpen ? 'visible' : 'hidden' } }
                duration={ 300 } >
                <div className={ classer }>
                    <VelocityComponent
                        animation={ { translateX: isOpen ? xPercent : '0%' } }
                        duration={ 260 } >
                        <div className={ `wrapper ${fromSide}` }>
                            <div className="header">
                                <Button
                                    type="grayscale"
                                    click={ this.onClickClose.bind(this) } />
                                { header }
                            </div>
                            <div className="content">
                                <div className="container">
                                    { children }
                                </div>
                            </div>
                        </div>
                    </VelocityComponent>
                </div>
            </VelocityComponent>
        );
    }
}

export default Pane;
