import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from 'styled-components';
import { Button } from '../buttonv2/Buttonv2.component';
import { Icon } from '../icon/Icon.component';
import { Input } from '../inputv2/inputv2';
import { Modal } from '../modal/Modal.component';
import { useToast } from '../toast/ToastProvider';
import { useForm } from 'react-hook-form';
import { Text } from '../text/Text.component';
import { useState } from 'react';
import { Stack, Wrap } from '../../spacing';
const UnderlinedText = styled(Text) `
  text-decoration-line: underline;
  text-decoration-style: dashed;
  cursor: text;
`;
export const InlineInput = ({ defaultValue, confirmationModal, changeMutation, ...props }) => {
    const { register, handleSubmit, watch, reset } = useForm({
        defaultValues: {
            value: defaultValue,
        },
    });
    const [isConfirmationModalOpened, setIsConfirmationModalOpened] = useState(false);
    const handleSuccess = () => {
        setIsConfirmationModalOpened(false);
        setIsEditing(false);
        setIsHover(false);
    };
    const onSubmit = (data) => {
        if (confirmationModal) {
            setIsConfirmationModalOpened(true);
        }
        else {
            changeMutation.mutate(data, {
                onSuccess: () => {
                    handleSuccess();
                },
                onError: () => {
                    showToast({
                        open: true,
                        status: 'error',
                        message: 'An error occurred while updating the value',
                    });
                },
            });
        }
    };
    const { showToast } = useToast();
    const [isHover, setIsHover] = useState(false);
    const [isEditing, setIsEditing] = useState(false);
    const handleReset = () => {
        reset();
        setIsEditing(false);
        setIsHover(false);
    };
    //handle esc key to cancel editing
    const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
            handleReset();
        }
    };
    if (isEditing) {
        return (_jsxs(_Fragment, { children: [_jsx("form", { onSubmit: handleSubmit(onSubmit), children: _jsxs(Stack, { children: [_jsx(Input, { ...register('value'), size: "1/3", autoFocus: true, onKeyDown: handleKeyDown, ...props }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: {
                                    overlay: 'Cancel',
                                }, type: "reset", variant: "outline", onClick: handleReset }), _jsx(Button, { icon: _jsx(Icon, { name: "Check" }), tooltip: {
                                    overlay: 'Save',
                                }, variant: "primary", type: "submit", isLoading: changeMutation.isLoading })] }) }), confirmationModal && (_jsx(Modal, { isOpen: isConfirmationModalOpened, title: confirmationModal.title, footer: _jsxs(Wrap, { children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Button, { label: "Cancel", variant: "outline", onClick: () => setIsConfirmationModalOpened(false) }), _jsx(Button, { label: "Confirm", variant: "primary", isLoading: changeMutation.isLoading, onClick: () => {
                                            changeMutation.mutate(watch(), {
                                                onSuccess: () => {
                                                    handleSuccess();
                                                },
                                                onError: () => {
                                                    showToast({
                                                        open: true,
                                                        status: 'error',
                                                        message: 'An error occurred while updating the value',
                                                    });
                                                },
                                            });
                                        } })] })] }), children: confirmationModal.body }))] }));
    }
    return (_jsxs(Stack, { onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), onFocus: () => setIsHover(true), onBlur: () => setIsHover(false), children: [_jsx(UnderlinedText, { children: watch('value') }), _jsx(Button, { icon: _jsx(Icon, { name: "Pencil" }), tooltip: {
                    overlay: 'Edit',
                }, variant: "primary", onClick: () => setIsEditing(true), style: { opacity: !isHover ? '0' : '1' } })] }));
};
