import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
import ChevronUpIcon from 'mdi-react/ChevronUpIcon';
import * as React from 'react';
import { eventLogger } from '../tracking/eventLogger';
/**
 * The container component for a result in the SearchResults component.
 */
export class ResultContainer extends React.PureComponent {
    constructor(props) {
        super(props);
        this.toggle = () => {
            if (!this.state.expanded) {
                eventLogger.log('SearchResultsExpanded');
            }
            this.setState(state => ({ expanded: !state.expanded }));
        };
        this.state = { expanded: this.props.allExpanded || this.props.defaultExpanded };
    }
    componentWillReceiveProps(nextProps) {
        if (this.state.expanded === this.props.allExpanded && this.props.allExpanded !== nextProps.allExpanded) {
            this.setState({ expanded: nextProps.allExpanded });
        }
        if (this.state.expanded !== this.props.allExpanded && this.props.allExpanded !== nextProps.allExpanded) {
            this.setState({ expanded: nextProps.allExpanded });
        }
    }
    render() {
        const Icon = this.props.icon;
        return (React.createElement("div", { className: "result-container" },
            React.createElement("div", { className: 'result-container__header' +
                    (this.props.collapsible ? ' result-container__header--collapsible' : ''), onClick: this.toggle },
                React.createElement(Icon, { className: "icon-inline" }),
                React.createElement("div", { className: `result-container__header-title ${this.props.titleClassName || ''}` }, this.props.collapsible ? (React.createElement("span", { onClick: blockExpandAndCollapse }, this.props.title)) : (this.props.title)),
                this.props.collapsible &&
                    (this.state.expanded ? (React.createElement("small", { className: "result-container__toggle-matches-container" },
                        this.props.collapseLabel,
                        this.props.collapseLabel && React.createElement(ChevronUpIcon, { className: "icon-inline" }),
                        !this.props.collapseLabel && React.createElement(ChevronDownIcon, { className: "icon-inline" }))) : (React.createElement("small", { className: "result-container__toggle-matches-container" },
                        this.props.expandLabel,
                        this.props.expandLabel && React.createElement(ChevronDownIcon, { className: "icon-inline" }),
                        !this.props.expandLabel && React.createElement(ChevronRightIcon, { className: "icon-inline" }))))),
            !this.state.expanded && this.props.collapsedChildren,
            this.state.expanded && this.props.expandedChildren));
    }
}
function blockExpandAndCollapse(e) {
    e.stopPropagation();
}
//# sourceMappingURL=ResultContainer.js.map