import React from "react";
const LIMEL_ICON_BUTTON = 'limel-icon-button';
export class SimpleItemTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.props = props;
        this.handleRemove = (event) => {
            const { item, index } = this.props;
            item.onDropIndexClick(index)(event);
        };
        this.setRemoveButton = (button) => {
            if (this.removeButton) {
                this.removeButton.removeEventListener('click', this.handleRemove);
            }
            this.removeButton = button || undefined;
            if (this.removeButton) {
                this.removeButton.addEventListener('click', this.handleRemove);
            }
        };
    }
    componentWillUnmount() {
        this.setRemoveButton(undefined);
    }
    render() {
        const { item, allowItemReorder } = this.props;
        return React.createElement('div', {
            className: 'array-item limel-form-array-item--simple',
            'data-reorder-id': String(this.props.dataIndex),
            'data-reorderable': allowItemReorder ? 'true' : 'false',
        }, this.props.item.children, this.renderRemoveButton(item), this.renderDragHandle());
    }
    renderDragHandle() {
        if (!this.props.allowItemReorder) {
            return;
        }
        return React.createElement('limel-drag-handle', {
            class: 'drag-handle',
        });
    }
    renderRemoveButton(item) {
        if (!this.props.allowItemRemoval) {
            return;
        }
        const props = {
            icon: 'trash',
            disabled: !item.hasRemove,
            ref: this.setRemoveButton,
        };
        return React.createElement(LIMEL_ICON_BUTTON, props);
    }
}
