import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { formattingLocale } from '../booking-ui/dateTime';
import { BookingApi } from '../booking-ui/api';
type EmailKey = 'confirmation_email_intro' | 'confirmation_email_outro';
interface EmailMetadata {
    custom: Record<string, string>;
    defaults: Record<string, string>;
    is_custom: Record<string, boolean>;
    resolved: Record<string, {
        value: string;
        is_custom: boolean;
        locale: string;
    }>;
}
interface Rules {
    confirmation_email_metadata: Record<EmailKey, EmailMetadata>;
    max_daily_customer_bookings: number;
    online_booking_cutoff_mode: string;
    online_booking_cutoff_hours: number | null;
    booking_contact_phone: string;
    confirmation_email_intro: Record<string, string>;
    confirmation_email_outro: Record<string, string>;
}
export function BookingRulesSettings({ api }: {
    api: BookingApi;
}) {
    const [data, setData] = React.useState<Rules | null>(null), [busy, setBusy] = React.useState(false), [error, setError] = React.useState(''), [saved, setSaved] = React.useState(false), [locale, setLocale] = React.useState(formattingLocale().replace('-', '_')), [resetLocales, setResetLocales] = React.useState<string[]>([]);
    const keys: EmailKey[] = ['confirmation_email_intro', 'confirmation_email_outro'];
    function editText(key: EmailKey, value: string) { if (!data)
        return; setSaved(false); setResetLocales(resetLocales.filter(l => l !== locale)); setData({ ...data, [key]: { ...data[key], [locale]: value }, confirmation_email_metadata: { ...data.confirmation_email_metadata, [key]: { ...data.confirmation_email_metadata[key], custom: { ...data.confirmation_email_metadata[key].custom, [locale]: value } } } }); }
    function resetTexts() { if (!data)
        return; const changed = keys.some(key => data[key][locale] !== data.confirmation_email_metadata[key].defaults[locale]); if (changed && !window.confirm(__('Restore the default texts for this language? Both current texts will be replaced.', 'abece-booking')))
        return; const next = { ...data, confirmation_email_metadata: { ...data.confirmation_email_metadata } }; for (const key of keys) {
        const metadata = { ...data.confirmation_email_metadata[key], custom: { ...data.confirmation_email_metadata[key].custom } };
        delete metadata.custom[locale];
        next[key] = { ...data[key], [locale]: metadata.defaults[locale] };
        next.confirmation_email_metadata[key] = metadata;
    } setData(next); setResetLocales([...new Set([...resetLocales, locale])]); setSaved(false); }
    React.useEffect(() => { let alive = true; api.request<Rules>('settings/bookings').then(d => { if (alive) {
        setData(d);
        setLocale(current => Object.prototype.hasOwnProperty.call(d.confirmation_email_intro, current) ? current : 'en_US');
    } }).catch(e => { if (alive)
        setError(e.message); }); return () => { alive = false; }; }, [api]);
    async function save(e: React.FormEvent) { e.preventDefault(); setBusy(true); setSaved(false); setError(''); try {
        if (!data)
            return;
        const { confirmation_email_metadata, ...input } = data;
        input.confirmation_email_intro = confirmation_email_metadata.confirmation_email_intro.custom;
        input.confirmation_email_outro = confirmation_email_metadata.confirmation_email_outro.custom;
        setData(await api.request<Rules>('settings/bookings', 'PATCH', { ...input, reset_confirmation_email_locales: resetLocales }));
        setResetLocales([]);
        setSaved(true);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    return <>{error && <p role="alert">{error}</p>}{saved && <p role="status">{__('Changes saved.', 'abece-booking')}</p>}{data ? <form onSubmit={save}><fieldset disabled={busy}>
 <section className="asb-form-section"><h2>{__('Online bookings', 'abece-booking')}</h2><label>{__('Latest online booking', 'abece-booking')}<select aria-label={__('Latest online booking', 'abece-booking')} value={data.online_booking_cutoff_mode} onChange={e => setData({ ...data, online_booking_cutoff_mode: e.target.value })}><option value="none">{__('No restriction until the booking starts', 'abece-booking')}</option><option value="hours_before">{__('Hours before the start', 'abece-booking')}</option><option value="previous_day">{__('Same-day bookings by phone only', 'abece-booking')}</option></select></label>
 {data.online_booking_cutoff_mode === 'hours_before' && <label>{__('At least this many hours before the start', 'abece-booking')}<input aria-label={__('At least this many hours before the start', 'abece-booking')} type="number" min={1} max={8760} required value={data.online_booking_cutoff_hours ?? ''} onChange={e => setData({ ...data, online_booking_cutoff_hours: e.target.value ? Number(e.target.value) : null })}/></label>}
 <p className="description">{__('The cutoff restricts customer online bookings. Managers may still book future times by phone; past starts are never allowed.', 'abece-booking')}</p></section>
 <section className="asb-form-section"><h2>{__('Daily limits', 'abece-booking')}</h2><label>{__('Maximum customer bookings for one day', 'abece-booking')}<input aria-label={__('Maximum customer bookings for one day', 'abece-booking')} type="number" min={1} max={1000} required value={data.max_daily_customer_bookings} onChange={e => setData({ ...data, max_daily_customer_bookings: Number(e.target.value) })}/></label><p className="description">{__('The limit counts active online bookings assigned to one customer on the reserved local calendar day, across all resources. Managers can exceed it after confirmation.', 'abece-booking')}</p></section>
 <section className="asb-form-section"><h2>{__('Contact details', 'abece-booking')}</h2><label>{__('Phone for telephone bookings', 'abece-booking')}<input aria-label={__('Phone for telephone bookings', 'abece-booking')} type="tel" maxLength={60} value={data.booking_contact_phone} onChange={e => setData({ ...data, booking_contact_phone: e.target.value })}/></label></section>
 <section className="asb-form-section asb-email-settings"><h2>{__('Emails', 'abece-booking')}</h2>
 <p>{__('The plugin automatically adds the booking details: resource, date, time, price and payment information. Here you can set additional text before and after these details.', 'abece-booking')}</p>
 <label className="asb-stacked" htmlFor="asb-email-language">{__('Email language', 'abece-booking')}<select id="asb-email-language" value={locale} onChange={e => setLocale(e.target.value)}>{Object.keys(data.confirmation_email_intro).map(language => <option value={language} key={language}>{new Intl.DisplayNames([language.replace('_', '-')], { type: 'language' }).of(language.replace('_', '-'))} ({language})</option>)}</select></label>
 <div className="asb-email-panel" role="region" aria-labelledby="asb-email-language" key={locale}>
 {keys.map(key => <div className="asb-email-field" key={key}>
 <label htmlFor={'asb-email-' + key + '-' + locale}>{key === 'confirmation_email_intro' ? __('Text before booking details', 'abece-booking') : __('Text after booking details', 'abece-booking')}</label>
 <p className="description" id={'asb-email-help-' + key}>{key === 'confirmation_email_intro' ? __('Shown before the automatically generated booking details.', 'abece-booking') : __('Shown after the automatically generated booking details.', 'abece-booking')}</p>
 <textarea id={'asb-email-' + key + '-' + locale} aria-describedby={'asb-email-help-' + key} rows={5} maxLength={5000} value={data[key][locale]} onChange={e => editText(key, e.target.value)}/>
 </div>)}
 <button type="button" className="button" onClick={resetTexts}>{__('Restore default text', 'abece-booking')}</button>
 <p className="description">{__('Plain text only. Line breaks are preserved. Save settings to apply your changes.', 'abece-booking')}</p>
 </div></section>
 <button className="button button-primary">{busy ? __('Saving…', 'abece-booking') : __('Save settings', 'abece-booking')}</button></fieldset></form> : !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}</>;
}