import { DailyOverview } from './DailyOverview';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
import { Bookings } from '../booking-ui/Bookings';
import { Calendar, CalendarPanel, type CalendarPrefill } from '../booking-ui/Calendar';
import { CalendarBookingPanel } from '../booking-ui/CalendarBookingPanel';
import type { Booking } from '../booking-ui/types';
import { BookingEditor } from './BookingEditor';
export function ReservationsApp({ api }: {
    api: BookingApi;
}) {
    const [tab, setTab] = React.useState(new URLSearchParams(window.location.search).get('view') === 'list' ? 'list' : 'calendar');
    const [editor, setEditor] = React.useState<Booking | 'new' | null>(null), [prefill, setPrefill] = React.useState<CalendarPrefill | undefined>(), [detail, setDetail] = React.useState<number | null>(Number(new URLSearchParams(window.location.search).get('booking')) || null);
    const [selectedDate, setSelectedDate] = React.useState('');
    const [refresh, setRefresh] = React.useState(0), [message, setMessage] = React.useState('');
    const dirty = React.useRef(false);
    const close = React.useCallback(() => { setEditor(null); setDetail(null); setPrefill(undefined); }, []);
    const requestClose = () => { if (!dirty.current || window.confirm(__('Discard unsaved booking changes?', 'abece-booking'))) {
        dirty.current = false;
        close();
    } };
    const edit = (b: Booking) => { dirty.current = false; setDetail(null); setEditor(b); setPrefill(undefined); setMessage(''); };
    return <div className="asb-admin asb-reservations"><div className="asb-heading"><h1>{__('Reservations', 'abece-booking')}</h1><button className="button button-primary" onClick={() => { dirty.current = false; setEditor('new'); setPrefill(undefined); setMessage(''); }}>{__('Add booking', 'abece-booking')}</button>{false}<a className="button" href="admin.php?page=abece-booking-receivables">{__('Outstanding amounts', 'abece-booking')}</a><a className="button" href="admin.php?page=abece-booking-external-contacts">{__('External contacts', 'abece-booking')}</a></div>
  <nav className="nav-tab-wrapper" aria-label={__('Reservation views', 'abece-booking')}>{[['calendar', __('Calendar', 'abece-booking')], ['list', __('Reservation list', 'abece-booking')], ['series', __('Recurring bookings', 'abece-booking')]].filter(([v]) => v !== 'series' || false).map(([value, label]) => <button className={`nav-tab ${tab === value ? 'nav-tab-active' : ''}`} aria-pressed={tab === value} key={value} onClick={() => setTab(value)}>{label}</button>)}</nav>
  {message && <p role="status">{message}</p>}
  {tab === 'calendar' ? <Calendar api={api} admin initialDate={selectedDate} onDateChange={setSelectedDate} onRefresh={() => setRefresh(n => n + 1)} refresh={refresh} paused={editor !== null || detail !== null} onSelect={p => { dirty.current = false; setPrefill(p); setEditor('new'); setMessage(''); }} onBooking={setDetail}/> : <Bookings api={api} admin refresh={refresh} onEdit={edit}/>}
  {tab === 'calendar' && selectedDate && <DailyOverview api={api} date={selectedDate} refresh={refresh} onBooking={setDetail}/>}
  {editor && <CalendarPanel title={editor === 'new' ? __('Add booking', 'abece-booking') : __('Edit booking', 'abece-booking')} onClose={requestClose}><BookingEditor key={editor === 'new' ? prefill?.starts_at ?? 'new' : editor.id} api={api} booking={editor === 'new' ? undefined : editor} prefill={prefill} initialDate={selectedDate} onDirtyChange={value => { dirty.current = value; }} onSaved={() => { dirty.current = false; close(); setRefresh(r => r + 1); setMessage(__('Changes saved.', 'abece-booking')); }} onClose={requestClose}/></CalendarPanel>}
  {detail && <CalendarBookingPanel id={detail} api={api} onClose={close} onChanged={() => setRefresh(r => r + 1)} onEdit={edit}/>}
 </div>;
}