'use strict';

import React from 'react';

module.exports = React.createClass({
    displayName: 'Spoiler',

    getInitialState() {
        return {
            visible: false,
        };
    },

    toggleVisible() {
        this.setState({ visible: !this.state.visible });
    },

    render: function() {
        const reason = this.props.reason ? (
            <span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
        ) : null;
        return (
            <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
                { reason }
                &nbsp;
                <span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />
            </span>
        );
    }
})

@@ -208,20 +208,229 @@
 Visible(
+e
 ) %7B%0A
+        if (!this.state.visible) %7B%0A            // we are un-blurring, we don't want this click to propagate to potential child pills%0A            e.preventDefault();%0A            e.stopPropagation();%0A        %7D%0A
         

stop propagation of click events on un-hiding the spoiler