import React from 'react';
import { Add, Delete } from '@wix/wix-ui-icons-common';
import Selector from '../Selector';
import Text from '../Text';
import Button from '../Button';
import IconButton from '../IconButton';
import TextButton from '../TextButton';
import EditableRow from './EditableRow/EditableRow';
import { classes } from './EditableSelector.st.css.js';
import { dataHooks } from './constants';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
class EditableSelector extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            addingNewRow: false,
            editingRow: null,
        };
        this._addNewRow = () => {
            this.setState({ addingNewRow: true, editingRow: false });
        };
        this._editItem = index => {
            this.setState({ editingRow: index, addingNewRow: false });
        };
        this._deleteItem = index => {
            this.props.onOptionDelete && this.props.onOptionDelete({ index });
        };
        this._onNewOptionApprove = ({ newTitle, index }) => {
            if (this.state.addingNewRow) {
                this.props.onOptionAdded && this.props.onOptionAdded({ newTitle });
            }
            else {
                this.props.onOptionEdit && this.props.onOptionEdit({ newTitle, index });
            }
            this.setState({
                addingNewRow: false,
                editingRow: null,
            });
        };
        this._onNewOptionCancel = () => {
            this.setState({
                addingNewRow: false,
                editingRow: null,
            });
        };
        this._onOptionToggle = id => {
            this.props.onOptionToggle && this.props.onOptionToggle(id);
        };
        this._renderInput = (title, index) => {
            return (React.createElement(EditableRow, { key: index, dataHook: dataHooks.editRowWrapper, onApprove: newTitle => this._onNewOptionApprove({ newTitle, index }), onCancel: () => this._onNewOptionCancel(), newOption: title }));
        };
    }
    render() {
        const { dataHook, title, newRowLabel, editButtonText, toggleType } = this.props;
        let { options } = this.props;
        options = options || [];
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const AddIcon = icons.EditableSelector?.Add || Add;
            const DeleteIcon = icons.EditableSelector?.Delete || Delete;
            return (React.createElement("div", { "data-hook": dataHook },
                title && (React.createElement("div", { className: classes.title, "data-hook": dataHooks.title },
                    React.createElement(Text, { weight: "normal" }, title))),
                React.createElement("div", null, options.map((option, index) => this.state.editingRow === index ? (this._renderInput(option.title, index)) : (React.createElement("div", { "data-hook": dataHooks.row, className: classes.row, key: index },
                    React.createElement(Selector, { dataHook: dataHooks.item, id: index, title: option.title, isSelected: option.isSelected, toggleType: toggleType, onToggle: id => this._onOptionToggle(id), className: classes.editableSelectorItem }),
                    React.createElement("div", { className: classes.optionMenu },
                        React.createElement(IconButton, { onClick: () => this._deleteItem(index), dataHook: dataHooks.deleteItem, type: "button", size: "small", priority: "secondary" },
                            React.createElement("span", null,
                                React.createElement(DeleteIcon, null))),
                        React.createElement("div", { className: classes.editRow },
                            React.createElement(Button, { onClick: () => this._editItem(index), dataHook: dataHooks.editItem, size: "small" }, editButtonText))))))),
                this.state.addingNewRow && this._renderInput(),
                React.createElement("div", { className: classes.newRowButton },
                    React.createElement(TextButton, { as: "a", underline: "none", onClick: this._addNewRow, prefixIcon: React.createElement(AddIcon, { className: classes.icon }), dataHook: dataHooks.newRowButtonText }, newRowLabel))));
        }));
    }
}
EditableSelector.defaultProps = {
    toggleType: 'checkbox',
    newRowLabel: 'New Row',
    editButtonText: 'Edit',
};
EditableSelector.displayName = 'EditableSelector';
export default EditableSelector;
//# sourceMappingURL=EditableSelector.js.map