import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from './api';
import type { Booking } from './types';
import { BookingDetails } from './Bookings';
import { CalendarPanel } from './Calendar';
export function CalendarBookingPanel({ id, api, onClose, onChanged, onEdit }: {
    id: number;
    api: BookingApi;
    onClose: () => void;
    onChanged: () => void;
    onEdit?: (b: Booking) => void;
}) {
    const [booking, setBooking] = React.useState<Booking | null>(null), [error, setError] = React.useState('');
    React.useEffect(() => { let alive = true; setBooking(null); setError(''); api.request<Booking>(`bookings/${id}`).then(b => { if (alive)
        setBooking(b); }).catch(e => { if (alive)
        setError(e.message); }); return () => { alive = false; }; }, [api, id]);
    return <CalendarPanel title={__('Booking details', 'abece-booking')} onClose={onClose}>{error && <p role="alert">{error}</p>}{!booking && !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}{booking && <BookingDetails booking={booking} api={api} onClose={onClose} onEdit={onEdit} onChanged={b => { setBooking(b); onChanged(); }}/>}</CalendarPanel>;
}