import React, { Component } from 'react';
import { X, Check } from '@wix/wix-ui-icons-common';
import Input from '../../Input';
import Tooltip from '../../Tooltip';
import IconButton from '../../IconButton';
import { classes } from '../EditableSelector.st.css.js';
import { dataHooks } from './constants';
import { IconThemeContext } from '../../WixDesignSystemIconThemeProvider/IconThemeContext';
class EditableRow extends Component {
    constructor(props) {
        super(props);
        this.onApprove = () => {
            this.props.onApprove && this.props.onApprove(this.state.newOption);
        };
        this.onCancel = () => {
            this.props.onCancel && this.props.onCancel();
        };
        this.state = {
            newOption: props.newOption || '',
        };
    }
    componentDidMount() {
        this.input.focus();
    }
    render() {
        const { dataHook } = this.props;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const XIcon = icons.EditableRow?.X || X;
            const CheckIcon = icons.EditableRow?.Check || Check;
            return (React.createElement("div", { "data-hook": dataHook, className: classes.editableRowContainer },
                React.createElement("div", { className: classes.editableRowInputWrap },
                    React.createElement(Input, { ref: input => {
                            this.input = input;
                        }, className: classes.editableRowInput, dataHook: dataHooks.editRowInput, value: this.state.newOption, onChange: event => this.setState({ newOption: event.target.value }), onEnterPressed: () => this.onApprove(), onEscapePressed: () => this.onCancel(), size: "medium", textOverflow: "clip", theme: "normal", width: "initial" })),
                React.createElement("div", { className: classes.editableRowButtons },
                    React.createElement(Tooltip, { content: "Cancel", timeout: 0 },
                        React.createElement(IconButton, { onClick: this.onCancel, size: "medium", priority: "secondary", dataHook: dataHooks.editRowCancelButton },
                            React.createElement(XIcon, null))),
                    React.createElement(Tooltip, { content: "Confirm", timeout: 0 },
                        React.createElement(IconButton, { onClick: this.onApprove, size: "medium", disabled: this.state.newOption.length === 0, dataHook: dataHooks.editRowApproveButton },
                            React.createElement(CheckIcon, null))))));
        }));
    }
}
export default EditableRow;
//# sourceMappingURL=EditableRow.js.map