import React from 'react';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import Radio from '../../Radio';
import Text from '../../Text';
import Collapse from '../../Collapse';
import Divider from '../../Divider';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { st, classes } from './Item.st.css.js';
class SelectableAccordionItem extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { hovered: false };
        this._onChange = event => {
            const { idx, type, open, onChange, disabled } = this.props;
            if (disabled) {
                return;
            }
            if (type === 'radio' && open) {
                return;
            }
            onChange(event, idx, !open);
        };
        this._onMouseEnter = () => this.setState({ hovered: true });
        this._onMouseLeave = () => this.setState({ hovered: false });
    }
    _renderSelector() {
        const { type, open, disabled } = this.props;
        let selector = null;
        switch (type) {
            case TYPES.CHECKBOX:
                selector = (React.createElement(Checkbox, { checked: open, onChange: this._onChange, disabled: disabled }));
                break;
            case TYPES.RADIO:
                selector = (React.createElement(Radio, { checked: open, onChange: this._onChange, disabled: disabled }));
                break;
            case TYPES.TOGGLE:
                selector = (React.createElement(ToggleSwitch, { checked: open, onChange: this._onChange, size: "small", disabled: disabled }));
                break;
            default:
                break;
        }
        return (React.createElement("span", { className: classes.selectorToggle, onClick: e => e.stopPropagation() }, selector));
    }
    _renderTitle() {
        const { title } = this.props;
        if (isString(title)) {
            return (React.createElement(Text, { weight: "normal", size: "medium" }, title));
        }
        else {
            return title;
        }
    }
    _renderContent() {
        const { content } = this.props;
        return isString(content) ? (React.createElement(Text, { className: classes.text, size: "small", weight: "thin" }, content)) : (content);
    }
    _renderSubtitle() {
        const { subtitle } = this.props;
        return isString(subtitle) ? (React.createElement(Text, { ellipsis: true, size: "small", weight: "thin" }, subtitle)) : (subtitle);
    }
    render() {
        const { hovered } = this.state;
        const { open, verticalPadding, disabled, content } = this.props;
        return (React.createElement("div", { "data-hook": dataHooks.item, "data-state": open ? 'open' : 'collapsed', "data-disabled": disabled, className: st(classes.item, {
                hovered: !open && hovered,
                verticalPadding,
                disabled,
            }) },
            React.createElement("div", { onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: this._onChange, className: classes.selector }, this._renderSelector()),
            React.createElement("div", { "data-hook": dataHooks.itemHeader, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: this._onChange, className: classes.header },
                this._renderTitle(),
                this._renderSubtitle()),
            React.createElement("div", { className: classes.content },
                content ? (React.createElement(Collapse, { open: open },
                    React.createElement("div", { className: classes.inner }, this._renderContent()))) : null,
                React.createElement("div", { className: classes.divider },
                    React.createElement(Divider, null)))));
    }
}
SelectableAccordionItem.defaultProps = {
    type: 'toggle',
    onChange: () => { },
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
export default SelectableAccordionItem;
//# sourceMappingURL=Item.js.map