import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
import { minorAmount, majorText } from '../booking-ui/pricing';
import type { Config } from './types';
interface Rule {
    id: number;
    price_list_id: number;
    resource_id: number | null;
    amount: number;
    is_active: boolean;
    rule_type: string;
    day_of_week: number | null;
    time_from: string | null;
    time_to: string | null;
}
interface List {
    id: number;
    name: string;
    currency: string;
}
export function BasicPricingApp({ config }: {
    config: Config;
}) {
    const api = React.useMemo(() => new BookingApi(config), [config]);
    const [resources, setResources] = React.useState<{
        id: number;
        name: string;
    }[]>([]), [lists, setLists] = React.useState<List[]>([]), [rules, setRules] = React.useState<Rule[]>([]), [resource, setResource] = React.useState(''), [list, setList] = React.useState(''), [amount, setAmount] = React.useState(''), [currency, setCurrency] = React.useState('CZK'), [error, setError] = React.useState(''), [saved, setSaved] = React.useState(false), [busy, setBusy] = React.useState(false), [revision, refresh] = React.useReducer(n => n + 1, 0);
    React.useEffect(() => { let live = true; Promise.all([api.all<{
            id: number;
            name: string;
        }>('resources', { per_page: '100' }), api.all<List>('price-lists', { per_page: '100' }), api.all<Rule>('price-rules', { per_page: '100' })]).then(([r, l, p]) => { if (live) {
        setResources(r.items);
        setLists(l.items);
        setRules(p.items);
        setList(current => current || String(l.items[0]?.id ?? ''));
    } }).catch(e => { if (live)
        setError(e.message); }); return () => { live = false; }; }, [api, revision]);
    const existing = rules.find(r => String(r.resource_id) === resource && r.is_active && r.rule_type === 'public_hourly_rate' && r.day_of_week === null && r.time_from === null && r.time_to === null);
    React.useEffect(() => { setAmount(existing ? majorText(existing.amount, lists.find(l => l.id === existing.price_list_id)?.currency ?? currency) : ''); if (existing)
        setList(String(existing.price_list_id)); setSaved(false); }, [existing?.id, existing?.amount, resource]);
    async function save(e: React.FormEvent) { e.preventDefault(); setBusy(true); setError(''); try {
        const selected = list ? Number(list) : (await api.request<List>('price-lists', 'POST', { name: __('Public price', 'abece-booking'), currency })).id;
        await api.request(existing ? `price-rules/${existing.id}` : 'price-rules', existing ? 'PATCH' : 'POST', { price_list_id: selected, resource_id: Number(resource), amount: minorAmount(amount, lists.find(l => String(l.id) === list)?.currency ?? currency) });
        setSaved(true);
        refresh();
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    return <div className="asb-admin"><h1>{__('Price lists', 'abece-booking')}</h1>{error && <p role="alert">{error}</p>}{saved && <p role="status">{__('Changes saved.', 'abece-booking')}</p>}<form className="asb-editor" onSubmit={save}><fieldset disabled={busy}><label>{__('Resource', 'abece-booking')}<select required value={resource} onChange={e => setResource(e.target.value)}><option value="">{__('Select…', 'abece-booking')}</option>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select></label>{lists.length > 0 ? <label>{__('Price list', 'abece-booking')}<select value={list} onChange={e => setList(e.target.value)}>{lists.map(l => <option key={l.id} value={l.id}>{l.name} ({l.currency})</option>)}</select></label> : <label>{__('Currency', 'abece-booking')}<input required pattern="[A-Z]{3}" maxLength={3} value={currency} onChange={e => setCurrency(e.target.value.toUpperCase())}/></label>}<label>{__('Hourly rate', 'abece-booking')}<input type="number" min="0" step="0.01" required value={amount} onChange={e => setAmount(e.target.value)}/></label><button className="button button-primary">{__('Save', 'abece-booking')}</button></fieldset></form></div>;
}