import "./accordion.scss";

import React        from "react";
import classnames   from "classnames";

export let Accordion = React.createClass( {
    propTypes : {
        className : React.PropTypes.oneOfType( [
            React.PropTypes.array,
            React.PropTypes.object,
            React.PropTypes.string
        ] )
    },

    render() {
        let classes = classnames( "accordion", this.props.className );

        return (
            <div className={classes}>
                {this.props.children}
            </div>
        );
    }
} );

export let Panel = React.createClass( {
    getDefaultProps() {
        return {
            open : false
        };
    },

    getInitialState() {
        return {
            open : this.props.open
        };
    },

    toggle() {
        this.setState( {
            open : ! this.state.open
        } );
    },

    render() {
        let classes = classnames( "accordion-panel", this.props.className, {
            "is-open" : this.state.open
        } );

        return (
            <div className={classes}>
                <div className="accordion-panel-title">
                    <a className="accordion-clickable" onClick={this.toggle}>{this.props.title}</a>
                    <span className="accordion-arrow">▼</span>
                </div>

                <div className="accordion-panel-content">
                    {this.props.children}
                </div>
            </div>
        );
    }
} );