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

type Props = {
    customerName: string,
    isOpen: boolean,
    onClose: () => void,
    onSave: (customer: string, name?: string, price?: number) => void,
    initialValues?: { text?: string, price?: string },
}

/** Modální dialog pro nastavení příplatků za pizzu. */
export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose, onSave, initialValues }: Props) {
    const textRef = useRef<HTMLInputElement>(null);
    const priceRef = useRef<HTMLInputElement>(null);

    const doSubmit = () => {
        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
    }

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
        }
    }

    return <Modal show={isOpen} onHide={onClose} size="lg">
        <Modal.Header closeButton>
            <Modal.Title>Příplatky za objednávku pro {customerName}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            Popis: <input className="mb-3" ref={textRef} type="text" placeholder="např. kuřecí maso" defaultValue={initialValues?.text} onKeyDown={handleKeyDown} /> <br />
            Cena v Kč: <input ref={priceRef} type="number" placeholder="0" defaultValue={initialValues?.price} onKeyDown={handleKeyDown} /> <br />
            <div className="mt-3" style={{ fontSize: 'small' }}>Je možné zadávat i záporné částky (např. v případě slev)</div>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary" onClick={onClose}>
                Storno
            </Button>
            <Button variant="primary" onClick={doSubmit}>
                Uložit
            </Button>
        </Modal.Footer>
    </Modal>
}