import { useRef } from "react";
import { Modal, Button, Form } from "react-bootstrap"

type Props = {
    isOpen: boolean,
    onClose: () => void,
    onSave: (note?: string) => void,
}

/** Modální dialog pro úpravu obecné poznámky. */
export default function NoteModal({ isOpen, onClose, onSave }: Props) {
    const note = useRef<HTMLInputElement>(null);

    const save = () => {
        onSave(note?.current?.value);
    }

    return <Modal show={isOpen} onHide={onClose}>
        <Modal.Header closeButton>
            <Modal.Title>Úprava poznámky</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form.Control ref={note} autoFocus={true} type="text" id="note" onKeyDown={event => {
                if (event.key === 'Enter') {
                    save();
                }
            }} />
        </Modal.Body>
        <Modal.Footer>
            <Button variant="primary" onClick={save}>
                Uložit
            </Button>
        </Modal.Footer>
    </Modal>
}