import { formatDateTime } from '../booking-ui/dateTime';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
interface Contact {
    id: number;
    display_name: string;
    phone: string | null;
    email: string | null;
    note: string | null;
    is_active: boolean;
    usage_count: number;
    last_used_at: string | null;
}
const empty = { display_name: '', phone: '', email: '', note: '', is_active: true };
export function ExternalContactsApp({ api }: {
    api: BookingApi;
}) {
    const [query, setQuery] = React.useState(''), [rows, setRows] = React.useState<Contact[]>([]), [page, setPage] = React.useState(1), [editor, setEditor] = React.useState<number | null>(null), [form, setForm] = React.useState(empty), [revision, setRevision] = React.useState(0), [busy, setBusy] = React.useState(false), [error, setError] = React.useState(''), [message, setMessage] = React.useState('');
    React.useEffect(() => { let alive = true; setBusy(true); const timer = setTimeout(() => api.request<Contact[]>('external-contacts', 'GET', undefined, { search: query, page: String(page), per_page: '20' }).then(value => { if (alive)
        setRows(value); }).catch(e => { if (alive)
        setError(e.message); }).finally(() => { if (alive)
        setBusy(false); }), 200); return () => { alive = false; clearTimeout(timer); }; }, [api, query, page, revision]);
    async function edit(id: number) { setError(''); try {
        const contact = await api.request<Contact>(`external-contacts/${id}`);
        setForm({ display_name: contact.display_name, phone: contact.phone || '', email: contact.email || '', note: contact.note || '', is_active: contact.is_active });
        setEditor(id);
    }
    catch (e) {
        setError((e as Error).message);
    } }
    async function save(e: React.FormEvent) { e.preventDefault(); setBusy(true); setError(''); try {
        await api.request(editor ? `external-contacts/${editor}` : 'external-contacts', editor ? 'PATCH' : 'POST', { ...form, phone: form.phone || null, email: form.email || null, note: form.note || null });
        setEditor(null);
        setRevision(n => n + 1);
        setMessage(__('Changes saved.', 'abece-booking'));
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    async function deactivate(contact: Contact) { setBusy(true); setError(''); try {
        await api.request(`external-contacts/${contact.id}`, 'PATCH', { is_active: !contact.is_active });
        setRevision(n => n + 1);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    return <div className="asb-admin"><div className="asb-heading"><h1>{__('External contacts', 'abece-booking')}</h1><button className="button button-primary" onClick={() => { setEditor(0); setForm(empty); setMessage(''); }}>{__('Add contact', 'abece-booking')}</button><a className="button" href="admin.php?page=abece-booking-bookings">{__('Reservations', 'abece-booking')}</a></div>
 <p>{__('Internal contacts for repeat phone bookings. Contacts do not have an account or membership.', 'abece-booking')}</p>{error && <p role="alert">{error}</p>}{message && <p role="status">{message}</p>}
 {editor !== null ? <form className="asb-form" onSubmit={save}><h2>{editor ? __('Edit contact', 'abece-booking') : __('Add contact', 'abece-booking')}</h2>{([['display_name', __('Name', 'abece-booking')], ['phone', __('Phone', 'abece-booking')], ['email', __('Email', 'abece-booking')]] as const).map(([key, label]) => <label key={key}>{label}<input aria-label={label} required={key === 'display_name'} type={key === 'email' ? 'email' : key === 'phone' ? 'tel' : 'text'} maxLength={key === 'phone' ? 50 : 190} value={form[key]} disabled={busy} onChange={e => setForm({ ...form, [key]: e.target.value })}/></label>)}<label>{__('Internal note', 'abece-booking')}<textarea aria-label={__('Internal note', 'abece-booking')} value={form.note} disabled={busy} onChange={e => setForm({ ...form, note: e.target.value })}/></label><label className="asb-checkbox"><input aria-label={__('Active', 'abece-booking')} type="checkbox" checked={form.is_active} disabled={busy} onChange={e => setForm({ ...form, is_active: e.target.checked })}/>{__('Active', 'abece-booking')}</label><button type="submit" disabled={busy}>{__('Save', 'abece-booking')}</button> <button type="button" disabled={busy} onClick={() => setEditor(null)}>{__('Close', 'abece-booking')}</button></form> : <><label>{__('Search contacts', 'abece-booking')}<input aria-label={__('Search contacts', 'abece-booking')} maxLength={190} value={query} onChange={e => { setQuery(e.target.value); setPage(1); }}/></label>{busy && <p role="status">{__('Loading…', 'abece-booking')}</p>}<div className="asb-table-scroll"><table className="widefat striped"><thead><tr>{[__('Name', 'abece-booking'), __('Phone', 'abece-booking'), __('Email', 'abece-booking'), __('Status', 'abece-booking'), __('Booking count', 'abece-booking'), __('Last used', 'abece-booking'), __('Actions', 'abece-booking')].map(label => <th key={label}>{label}</th>)}</tr></thead><tbody>{rows.map(contact => <tr key={contact.id}><td>{contact.display_name}</td><td>{contact.phone || '—'}</td><td>{contact.email || '—'}</td><td>{contact.is_active ? __('Active', 'abece-booking') : __('Inactive', 'abece-booking')}</td><td>{contact.usage_count}</td><td>{formatDateTime(contact.last_used_at)}</td><td><button disabled={busy} onClick={() => void edit(contact.id)}>{__('Edit', 'abece-booking')}</button> <button disabled={busy} onClick={() => void deactivate(contact)}>{contact.is_active ? __('Deactivate', 'abece-booking') : __('Activate', 'abece-booking')}</button></td></tr>)}</tbody></table></div>{!busy && !rows.length && <p>{__('No matching customers.', 'abece-booking')}</p>}<button disabled={page === 1 || busy} onClick={() => setPage(n => n - 1)}>{__('Previous', 'abece-booking')}</button> <span>{page}</span> <button disabled={rows.length < 20 || busy} onClick={() => setPage(n => n + 1)}>{__('Next', 'abece-booking')}</button></>}
 </div>;
}