import { Check, X } from '@wix/wix-ui-icons-common';
import React, { useCallback, useState } from 'react';
import Box from '../Box';
import IconButton from '../IconButton';
import Input from '../Input';
import Tooltip from '../Tooltip';
import { dataHooks, ListItemEditableSize } from './ListItemEditable.constants';
import { classes } from './ListItemEditable.st.css.js';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
export const ListItemEditable = ({ dataHook, className, margins = 'list-item', size = ListItemEditableSize.small, status, value, statusMessage, placeholder, suffix, autoFocus, onEnterPressed, cancelButtonTooltipProps, cancelButtonTooltipContent, approveButtonTooltipProps, approveButtonTooltipContent, approveButtonDisabledOnEmpty = true, onApprove = () => { }, onCancel = () => { }, onChange, maxLength, }) => {
    const icons = useIcons('ListItemEditable', {
        Check,
        X,
    });
    const [inputValue, setInputValue] = useState(value || '');
    const onInputChange = useCallback((event) => {
        setInputValue(event.target.value);
        onChange?.(event);
    }, [onChange]);
    const onApproveClicked = useCallback(() => onApprove(inputValue), [onApprove, inputValue]);
    return (React.createElement(Box, { dataHook: dataHook, className: className, margin: margins === 'list-item' ? '3px 24px' : undefined },
        React.createElement(Box, { marginRight: 3, flex: 1, minWidth: 0 },
            React.createElement(Input, { dataHook: dataHooks.input, className: classes.input, size: size, status: status, value: inputValue, statusMessage: statusMessage, onChange: onInputChange, placeholder: placeholder, suffix: suffix, autoFocus: autoFocus, onEnterPressed: onEnterPressed, maxLength: maxLength })),
        React.createElement(Box, { marginRight: 2 },
            React.createElement(Tooltip, { ...cancelButtonTooltipProps, dataHook: dataHooks.cancelButtonTooltip, disabled: !cancelButtonTooltipContent, content: cancelButtonTooltipContent },
                React.createElement(IconButton, { dataHook: dataHooks.cancelButton, size: size, priority: "secondary", onClick: onCancel },
                    React.createElement(icons.X, null)))),
        React.createElement(Tooltip, { ...approveButtonTooltipProps, dataHook: dataHooks.approveButtonTooltip, disabled: !approveButtonTooltipContent || !inputValue, content: approveButtonTooltipContent },
            React.createElement(IconButton, { size: size, disabled: approveButtonDisabledOnEmpty && !inputValue, onClick: onApproveClicked, dataHook: dataHooks.approveButton },
                React.createElement(icons.Check, null)))));
};
ListItemEditable.displayName = 'ListItemEditable';
export const listItemEditableBuilder = ({ id, dataHook, className, size, placeholder, onApprove, onCancel, onChange, cancelButtonTooltipContent, cancelButtonTooltipProps, approveButtonTooltipContent, approveButtonTooltipProps, approveButtonDisabledOnEmpty, status, statusMessage, margins, suffix, autoFocus, onEnterPressed, maxLength, }) => ({
    id,
    disabled: true,
    overrideOptionStyle: true,
    prefix: undefined,
    label: undefined,
    value: (props) => (React.createElement(ListItemEditable, { ...props, dataHook: dataHook, className: className, size: size, placeholder: placeholder, onApprove: onApprove, onCancel: onCancel, onChange: onChange, cancelButtonTooltipContent: cancelButtonTooltipContent, cancelButtonTooltipProps: cancelButtonTooltipProps, approveButtonTooltipContent: approveButtonTooltipContent, approveButtonTooltipProps: approveButtonTooltipProps, approveButtonDisabledOnEmpty: approveButtonDisabledOnEmpty, status: status, statusMessage: statusMessage, margins: margins, suffix: suffix, autoFocus: autoFocus, onEnterPressed: onEnterPressed, maxLength: maxLength })),
});
//# sourceMappingURL=ListItemEditable.js.map