import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from '../booking-ui/api';
export function CalendarSettings({ api }: {
    api: BookingApi;
}) {
    const [value, setValue] = React.useState('occupancy_only'), [busy, setBusy] = React.useState(true), [error, setError] = React.useState(''), [saved, setSaved] = React.useState(false);
    React.useEffect(() => { let alive = true; api.request<{
        public_calendar_visibility: string;
    }>('settings/calendar').then(s => { if (alive)
        setValue(s.public_calendar_visibility); }).catch(e => { if (alive)
        setError(e.message); }).finally(() => { if (alive)
        setBusy(false); }); return () => { alive = false; }; }, [api]);
    async function save(e: React.FormEvent) { e.preventDefault(); setBusy(true); setError(''); setSaved(false); try {
        await api.request('settings/calendar', 'PATCH', { public_calendar_visibility: value });
        setSaved(true);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    return <section className="asb-editor"><h2>{__('Public calendar', 'abece-booking')}</h2><p>{__('Visitors can see anonymous occupancy, or the calendar can require login. Customer identities are never public.', 'abece-booking')}</p>{error && <p role="alert">{error}</p>}{saved && <p role="status">{__('Changes saved.', 'abece-booking')}</p>}<form onSubmit={save}><fieldset disabled={busy}><label>{__('Public calendar visibility', 'abece-booking')}<select aria-label={__('Public calendar visibility', 'abece-booking')} value={value} onChange={e => setValue(e.target.value)}><option value="occupancy_only">{__('Anonymous occupancy', 'abece-booking')}</option><option value="hidden">{__('Login required', 'abece-booking')}</option></select></label> <button className="button button-primary" type="submit">{__('Save', 'abece-booking')}</button></fieldset></form></section>;
}