import * as React from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { CatalogApi } from './api';
import { CatalogForm } from './CatalogForm';
import { resourceTypes, accessModes } from './fields';
import type { Config, Item, Payload, Resource, Sport } from './types';
export function CatalogApp({ config }: {
    config: Config & {
        page: 'sports' | 'resources';
    };
}): React.ReactElement {
    const api = React.useMemo(() => new CatalogApi(config), [config]);
    const [items, setItems] = React.useState<Item[]>([]);
    const [sports, setSports] = React.useState<Sport[]>([]);
    const [page, setPage] = React.useState(1);
    const [pages, setPages] = React.useState(1);
    const [total, setTotal] = React.useState(0);
    const [revision, refresh] = React.useReducer((value: number) => value + 1, 0);
    const [loading, setLoading] = React.useState(true);
    const [busy, setBusy] = React.useState(false);
    const [error, setError] = React.useState('');
    const [notice, setNotice] = React.useState('');
    const [editor, setEditor] = React.useState<{
        item: Item | null;
    } | null>(null);
    const resources = config.page === 'resources';
    React.useEffect(() => {
        let active = true;
        setLoading(true);
        setError('');
        void Promise.all([api.list(config.page, page), resources ? api.sports() : Promise.resolve([])])
            .then(([result, options]) => {
            if (!active)
                return;
            setItems(result.items);
            setPages(Math.max(1, result.pages));
            setTotal(result.total);
            setSports(options);
        })
            .catch(cause => { if (active)
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking')); })
            .finally(() => { if (active)
            setLoading(false); });
        return () => { active = false; };
    }, [api, config.page, resources, page, revision]);
    async function save(payload: Payload): Promise<void> {
        await api.save(config.page, payload, editor?.item?.id);
        setEditor(null);
        setNotice(__('Changes saved.', 'abece-booking'));
        refresh();
    }
    async function toggle(item: Item, field: 'is_active' | 'is_visible' | 'is_bookable'): Promise<void> {
        setBusy(true);
        setError('');
        setNotice('');
        try {
            await api.save(config.page, { [field]: !(item as unknown as Record<string, boolean>)[field] }, item.id);
            setNotice(__('Changes saved.', 'abece-booking'));
            refresh();
        }
        catch (cause) {
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking'));
        }
        finally {
            setBusy(false);
        }
    }
    const headers = resources
        ? [__('Name', 'abece-booking'), __('Sport', 'abece-booking'), __('Type', 'abece-booking'), __('Active', 'abece-booking'), __('Visible', 'abece-booking'), __('Bookable', 'abece-booking'), __('Access mode', 'abece-booking'), __('Sort order', 'abece-booking'), __('Actions', 'abece-booking')]
        : [__('Name', 'abece-booking'), __('Slug', 'abece-booking'), __('Status', 'abece-booking'), __('Sort order', 'abece-booking'), __('Actions', 'abece-booking')];
    const yesNo = (value: boolean): string => value ? __('Yes', 'abece-booking') : __('No', 'abece-booking');
    return <div className="asb-admin">
    <div className="asb-heading">
      <h1>{resources ? __('Resources', 'abece-booking') : __('Sports', 'abece-booking')}</h1>
      <button className="button button-primary" disabled={loading || busy || editor !== null} onClick={() => { setNotice(''); setEditor({ item: null }); }}>
        {resources ? __('Add resource', 'abece-booking') : __('Add sport', 'abece-booking')}
      </button>
    </div>
    {false}
    {notice && <div className="notice notice-success inline" role="status"><p>{notice}</p></div>}
    {error && <div className="notice notice-error inline" role="alert"><p>{error} <button className="button" onClick={refresh}>{__('Retry', 'abece-booking')}</button></p></div>}
    {editor && <CatalogForm api={api} key={editor.item?.id ?? 'new'} kind={config.page} item={editor.item} sports={sports} pricesUrl={config.canManagePrices ? config.pricesUrl : undefined} onSave={save} onCancel={() => setEditor(null)}/>}
    {loading && <p role="status">{__('Loading…', 'abece-booking')}</p>}
    {!loading && !error && <>
      {total === 0 && <p>{resources ? __('Create your first resource to define what customers can book.', 'abece-booking') : __('Create a sport to group your resources.', 'abece-booking')}</p>}
      <p>{sprintf(__('Total items: %d', 'abece-booking'), total)}</p>
      <div className="asb-table-scroll">
        <table className="widefat striped"><thead><tr>{headers.map(header => <th key={header} scope="col">{header}</th>)}</tr></thead>
          <tbody>{items.length === 0 ? <tr><td colSpan={headers.length}>{__('No items found.', 'abece-booking')}</td></tr> : items.map(item => {
                const resource = item as Resource;
                return <tr key={item.id}>
              <td><strong>{item.name}</strong></td>
              {resources ? <>
                <td>{sports.find(sport => sport.id === resource.sport_id)?.name ?? __('No sport', 'abece-booking')}</td>
                <td>{resourceTypes.find(([value]) => value === resource.resource_type)?.[1] ?? resource.resource_type}</td>
                <td>{yesNo(item.is_active)}</td><td>{yesNo(resource.is_visible)}</td><td>{yesNo(resource.is_bookable)}</td>
                <td>{accessModes.find(([value]) => value === (config.membershipsEnabled === false ? 'public' : resource.access_mode))?.[1] ?? resource.access_mode}</td>
              </> : <><td><code>{item.slug}</code></td><td>{item.is_active ? __('Active', 'abece-booking') : __('Inactive', 'abece-booking')}</td></>}
              <td>{item.sort_order}</td>
              <td><div className="asb-actions">
                <button className="button" disabled={busy || editor !== null} onClick={() => { setNotice(''); setEditor({ item }); }}>{__('Edit', 'abece-booking')}</button>
                <button className="button" disabled={busy || editor !== null} onClick={() => void toggle(item, 'is_active')}>{item.is_active ? __('Deactivate', 'abece-booking') : __('Activate', 'abece-booking')}</button>
                {resources && <>
                  <button className="button" disabled={busy || editor !== null} onClick={() => void toggle(item, 'is_visible')}>{resource.is_visible ? __('Hide', 'abece-booking') : __('Show', 'abece-booking')}</button>
                  <button className="button" disabled={busy || editor !== null} onClick={() => void toggle(item, 'is_bookable')}>{resource.is_bookable ? __('Disable booking', 'abece-booking') : __('Enable booking', 'abece-booking')}</button>
                </>}
              </div></td>
            </tr>;
            })}</tbody>
        </table>
      </div>
      <div className="asb-pagination">
        <button className="button" disabled={page <= 1 || editor !== null} onClick={() => setPage(page - 1)}>{__('Previous', 'abece-booking')}</button>
        <span>{sprintf(__('Page %1$d of %2$d', 'abece-booking'), page, pages)}</span>
        <button className="button" disabled={page >= pages || editor !== null} onClick={() => setPage(page + 1)}>{__('Next', 'abece-booking')}</button>
      </div>
    </>}
  </div>;
}