import { methodLabel } from '../booking-ui/credit';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { ApiError, CatalogApi } from './api';
import { commonFields, resourceFields, resourceTypes } from './fields';
import type { Config, Item, Payload, Sport } from './types';
interface Props {
    api: CatalogApi;
    kind: Extract<Config['page'], 'sports' | 'resources'>;
    item: Item | null;
    sports: Sport[];
    pricesUrl?: string;
    onSave: (payload: Payload) => Promise<void>;
    onCancel: () => void;
}
export function CatalogForm({ api, kind, item, sports, pricesUrl, onSave, onCancel }: Props): React.ReactElement {
    const membershipEnabled = window.ABeCeBookingConfig?.membershipsEnabled !== false;
    const fields = (kind === 'sports' ? commonFields : [...commonFields, ...resourceFields, ...([])]).filter(f => membershipEnabled || !['access_mode', 'member_booking_days', 'public_release_hours'].includes(f.key));
    const initialOverride = item && 'payment_methods_override' in item ? item.payment_methods_override : null;
    const [inherit, setInherit] = React.useState(initialOverride === null), [methods, setMethods] = React.useState<string[]>(initialOverride ?? ['pay_on_site']);
    const defaults: Payload = { name: '', slug: '', description: null, is_active: true, sort_order: 0, sport_id: null, resource_type: '', surface: null, capacity: null, is_visible: true, is_bookable: true, online_booking_enabled: false, access_mode: 'public', member_booking_days: null, guest_booking_days: null, public_release_hours: null, min_booking_minutes: 30, max_booking_minutes: 120, booking_step_minutes: 30 };
    const source = item ? { ...defaults, ...item } : defaults;
    source.resource_type = resourceTypes.find(([key]) => source.resource_type === key)?.[1] ?? source.resource_type;
    const [values, setValues] = React.useState<Record<string, string | boolean>>(() => Object.fromEntries(fields.map(field => [field.key, typeof source[field.key] === 'boolean' ? source[field.key] : String(source[field.key] ?? '')])) as Record<string, string | boolean>);
    const [saving, setSaving] = React.useState(false);
    const [error, setError] = React.useState<ApiError | null>(null);
    const dirtyName = React.useRef(false), dirtyOrder = React.useRef(false);
    React.useEffect(() => { if (kind !== 'resources' || item)
        return; let alive = true; api.resourceSuggestions(String(values.sport_id)).then(s => { if (!alive)
        return; setValues(v => ({ ...v, ...(!dirtyOrder.current ? { sort_order: String(s.sort_order) } : {}), ...(!dirtyName.current ? { name: s.name ?? '' } : {}) })); }).catch(() => { }); return () => { alive = false; }; }, [api, kind, item, values.sport_id]);
    function change(key: string, value: string | boolean) { if (key === 'name')
        dirtyName.current = true; if (key === 'sort_order')
        dirtyOrder.current = true; setValues(v => ({ ...v, [key]: value })); }
    async function submit(event: React.FormEvent): Promise<void> {
        event.preventDefault();
        setSaving(true);
        setError(null);
        const payload: Payload = {};
        fields.forEach(field => {
            const value = values[field.key];
            payload[field.key] = field.nullable && value === '' ? null
                : field.type === 'number' || field.key === 'sport_id' ? Number(value)
                    : value;
        });
        if (kind === 'resources') {
            for (const key of ['member_booking_days', 'guest_booking_days', 'public_release_hours'])
                if (item && key in item && source[key] === 0 && payload[key] === 0)
                    delete payload[key];
            payload.payment_methods_override = inherit ? null : methods;
            payload.resource_type = resourceTypes.find(([key, label]) => payload.resource_type === label)?.[0] ?? payload.resource_type;
            for (const key of ['guest_booking_days', 'public_release_hours'])
                if ((key === 'guest_booking_days' && membershipEnabled && values.access_mode === 'members_only') || (key === 'public_release_hours' && (!membershipEnabled || values.access_mode !== 'members_priority')))
                    delete payload[key];
        }
        try {
            await onSave(payload);
        }
        catch (cause) {
            setError(cause instanceof ApiError ? cause : new ApiError(__('The request failed. Please try again.', 'abece-booking')));
        }
        finally {
            setSaving(false);
        }
    }
    const title = kind === 'sports'
        ? item ? __('Edit sport', 'abece-booking') : __('Create sport', 'abece-booking')
        : item ? __('Edit resource', 'abece-booking') : __('Create resource', 'abece-booking');
    const groups = kind === 'sports' ? [{ title: __('Basic information', 'abece-booking'), fields }] : [
        { title: __('Basic information', 'abece-booking'), fields: fields.filter(f => ['name', 'slug', 'description', 'sport_id', 'resource_type', 'surface', 'capacity', 'sort_order'].includes(f.key)) },
        { title: __('Availability and access', 'abece-booking'), fields: fields.filter(f => ['is_active', 'is_visible', 'is_bookable', 'online_booking_enabled', 'access_mode'].includes(f.key)) },
        { title: __('Booking rules', 'abece-booking'), fields: fields.filter(f => ['member_booking_days', 'guest_booking_days', 'public_release_hours', 'min_booking_minutes', 'max_booking_minutes', 'booking_step_minutes'].includes(f.key)) },
    ];
    return <section className="asb-editor" aria-labelledby="asb-editor-title">
    <h2 id="asb-editor-title">{title}</h2>
    {error && <div className="notice notice-error inline" role="alert"><p>{error.message}</p></div>}
    <form onSubmit={event => void submit(event)}>
      <fieldset disabled={saving}>
        {groups.map(group => <fieldset className="asb-form-section" key={group.title}><legend>{group.title}</legend><div className="asb-fields">
          {group.fields.filter(field => !(field.key === 'guest_booking_days' && membershipEnabled && values.access_mode === 'members_only') && !(field.key === 'public_release_hours' && (!membershipEnabled || values.access_mode !== 'members_priority'))).map(field => {
                const id = `asb-${field.key}`;
                const options = field.key === 'sport_id'
                    ? sports.map(sport => [String(sport.id), `${sport.name}${sport.is_active ? '' : ` (${__('Inactive', 'abece-booking')})`}`])
                    : field.options ?? [];
                return <div className={`asb-field ${field.type === 'textarea' ? 'asb-wide' : ''}`} key={field.key}>
              <label htmlFor={id}>{field.key === 'guest_booking_days' && !membershipEnabled ? __('Customers can book up to (days ahead)', 'abece-booking') : field.label}</label>
              {field.type === 'checkbox'
                        ? <input id={id} type="checkbox" checked={values[field.key] === true} onChange={event => change(field.key, event.target.checked)}/>
                        : field.type === 'textarea'
                            ? <textarea id={id} rows={3} value={String(values[field.key])} onChange={event => change(field.key, event.target.value)}/>
                            : field.type === 'select'
                                ? <select id={id} value={String(values[field.key])} onChange={event => change(field.key, event.target.value)}>
                      {field.nullable && <option value="">{__('No sport', 'abece-booking')}</option>}
                      {options.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                    </select>
                                : <input id={id} type={field.type} value={String(values[field.key])} required={field.required} placeholder={field.key === 'resource_type' ? __('Resource', 'abece-booking') : undefined} min={['member_booking_days', 'guest_booking_days'].includes(field.key) && source[field.key] === 0 && values[field.key] === '0' ? 0 : field.min} step={field.type === 'number' ? 1 : undefined} list={field.key === 'resource_type' ? 'asb-resource-types' : undefined} maxLength={field.type === 'text' ? field.maxLength ?? 150 : undefined} aria-invalid={error?.field === field.key} onChange={event => change(field.key, event.target.value)}/>}
              {field.key === 'resource_type' && <datalist id="asb-resource-types">{resourceTypes.map(([key, label]) => <option key={key} value={label}/>)}</datalist>}
              {['member_booking_days', 'guest_booking_days'].includes(field.key) && source[field.key] === 0 && values[field.key] === '0' && <span className="description">{__('The saved zero permits only today. Keep it unchanged or clear the field for unlimited advance bookings.', 'abece-booking')}</span>}
              {['member_booking_days', 'guest_booking_days'].includes(field.key) && <span className="description">{__('Leave blank for bookings without a limit on how far ahead.', 'abece-booking')}</span>}
              {field.key === 'public_release_hours' && <span className="description">{__('Non-members may book only within this many hours before the start, also respecting their days-ahead limit.', 'abece-booking')}</span>}
              {['min_booking_minutes', 'max_booking_minutes', 'booking_step_minutes'].includes(field.key) && <span className="description">{__('Duration and time steps are in minutes.', 'abece-booking')}</span>}
              {field.description && <span className="description">{field.description}</span>}
              {field.key === 'slug' && <span className="description">{__('Leave blank to generate from name.', 'abece-booking')}</span>}
            </div>;
            })}
        </div></fieldset>)}
        {kind === 'resources' && <fieldset className="asb-form-section"><legend>{__('Payments', 'abece-booking')}</legend><label className="asb-checkbox"><input aria-label={__('Use site payment defaults', 'abece-booking')} type="checkbox" checked={inherit} onChange={e => setInherit(e.target.checked)}/>{__('Use site payment defaults', 'abece-booking')}</label>{!inherit && <><p>{__('Overrides only restrict globally enabled and technically available methods. Credit requires a customer account; cash and manual payment are manager-only.', 'abece-booking')}</p>{['credit', 'pay_on_site', 'bank_transfer', 'qr_payment', 'cash', 'manual'].filter(m => !['credit', 'bank_transfer', 'qr_payment'].includes(m) || false).map(method => <label className="asb-checkbox" key={method}><input aria-label={methodLabel(method)} type="checkbox" checked={methods.includes(method)} onChange={e => setMethods(current => e.target.checked ? [...current, method] : current.filter(m => m !== method))}/>{methodLabel(method)}</label>)}</>}</fieldset>}
        {kind === 'resources' && item && pricesUrl && <p><a className="button" href={`${pricesUrl}&resource_id=${item.id}`}>{__('Resource prices', 'abece-booking')}</a></p>}
        <div className="asb-buttons">
          <button className="button button-primary" type="submit">{saving ? __('Saving…', 'abece-booking') : __('Save', 'abece-booking')}</button>
          <button className="button" type="button" onClick={onCancel}>{__('Cancel', 'abece-booking')}</button>
        </div>
      </fieldset>
    </form>
  </section>;
}