import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import classNames from '../../../../../../../_virtual/index.mjs';
import React__default, { useRef, useEffect } from 'react';
import Button from '../../../components/atoms/Button.mjs';
import Typography from '../../../components/atoms/Typography.mjs';
import Input from '../../../components/molecules/Input.mjs';
import modules_20f268b7 from './EditableRow.module.css.mjs';

const commonButtonProps = {
    block: false,
    variant: 'ghost'
};
const EditableRow = ({ id, name, className, state, updateState, handleEdit })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const isEditing = isEditingRow(id, state);
    const othersEditing = state.type !== 'viewing' && state.id !== id;
    const inputRef = useRef(null);
    useEffect(()=>{
        if (isEditing) {
            inputRef.current?.focus();
        }
    }, [
        isEditing
    ]);
    return /*#__PURE__*/ React__default.createElement("form", {
        className: classNames(modules_20f268b7.row, className),
        onSubmit: (evt)=>{
            evt.preventDefault();
            if (isEditing) {
                handleEdit(id, state.newName);
            }
        },
        "data-testid": testId(id)
    }, /*#__PURE__*/ React__default.createElement("div", {
        className: modules_20f268b7.input
    }, isEditing ? /*#__PURE__*/ React__default.createElement(Input, {
        id: `passkey-name-${id}`,
        ref: inputRef,
        label: $__i18n._({
            id: "passkey.editing.label",
            message: "Passkey name"
        }),
        hideLabel: true,
        value: isEditing ? state.newName : name,
        onChange: (e)=>{
            if (isEditing) {
                updateState({
                    ...state,
                    newName: e.target.value
                });
            }
        }
    }) : /*#__PURE__*/ React__default.createElement(Typography, {
        color: "muted"
    }, name)), (()=>{
        if (state.type === 'deleting') return null;
        if (isEditing) {
            return /*#__PURE__*/ React__default.createElement("div", {
                className: modules_20f268b7.actions
            }, /*#__PURE__*/ React__default.createElement(Button, {
                key: "submit",
                type: "submit",
                ...commonButtonProps
            }, $__i18n._({
                id: "button.save",
                message: "Save"
            })), /*#__PURE__*/ React__default.createElement(Button, {
                onClick: ()=>updateState({
                        type: 'viewing'
                    }),
                ...commonButtonProps
            }, $__i18n._({
                id: "button.cancel",
                message: "Cancel"
            })));
        }
        if (state.type === 'viewing' || othersEditing) {
            return /*#__PURE__*/ React__default.createElement("div", {
                className: modules_20f268b7.actions
            }, /*#__PURE__*/ React__default.createElement(Button, {
                // key required to workaround a React/Preact issue when button type is updated on re-render
                key: "edit",
                onClick: ()=>updateState({
                        type: 'editing',
                        id,
                        newName: name
                    }),
                disabled: othersEditing,
                ...commonButtonProps
            }, $__i18n._({
                id: "button.edit",
                message: "Edit"
            })), /*#__PURE__*/ React__default.createElement(Button, {
                onClick: ()=>updateState({
                        type: 'deleting',
                        id
                    }),
                disabled: othersEditing,
                ...commonButtonProps
            }, $__i18n._({
                id: "button.delete",
                message: "Delete"
            })));
        }
    })());
};
function isEditingRow(id, state) {
    return state.type === 'editing' && state.id === id;
}
function testId(id) {
    return `editable-row-${id}`;
}

export { EditableRow, isEditingRow, testId };
//# sourceMappingURL=EditableRow.mjs.map
