import React, { useMemo, useState } from 'react';
import { __, _n, sprintf } from '@wordpress/i18n';
import { Alert, Button, Checkbox, Input } from '../../shared/ui';

/**
 * Checkbox list for a many-to-many relation (services ↔ categories, staff ↔ services…).
 *
 * @param {Array<{id, name, description?}>} options
 * @param {number[]}  value
 * @param {Function}  onChange   (ids:number[]) => void
 * @param {string}    [emptyText]
 * @param {string}    [emptyHref]  Link target for "create one".
 */
export default function RelationPicker({ options, value, onChange, label, emptyText, emptyLabel, emptyHref, error, searchable }) {
	const [q, setQ] = useState('');
	const ids = useMemo(() => (value || []).map(Number), [value]);
	const shown = options.filter((o) => !q.trim() || `${o.name} ${o.description || ''}`.toLowerCase().includes(q.trim().toLowerCase()));
	const showSearch = searchable ?? options.length > 8;
	const toggle = (id) => onChange(ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id]);

	if (error) return <Alert tone="warning">{error}</Alert>;
	if (!options.length) {
		return (
			<p className="bp-text-muted">
				{emptyText}{' '}
				{emptyHref ? <a href={emptyHref}>{emptyLabel}</a> : null}
			</p>
		);
	}

	return (
		<div className="bp-relation">
			<div className="bp-relation__bar">
				{showSearch ? <Input icon="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder={__('Search…', 'pointly-booking')} aria-label={sprintf(/* translators: %s: what is searched, e.g. "Services". */ __('Search %s', 'pointly-booking'), label)} /> : <span />}
				<div className="bp-cluster">
					<span className="bp-text-muted bp-text-sm" aria-live="polite">
						{sprintf(/* translators: 1: selected, 2: total. */ _n('%1$d of %2$d selected', '%1$d of %2$d selected', ids.length, 'pointly-booking'), ids.length, options.length)}
					</span>
					<Button variant="link" size="sm" onClick={() => onChange(options.map((o) => Number(o.id)))}>
						{__('Select all', 'pointly-booking')}
					</Button>
					<Button variant="link" size="sm" onClick={() => onChange([])} disabled={!ids.length}>
						{__('Clear', 'pointly-booking')}
					</Button>
				</div>
			</div>
			<div className="bp-check-grid" role="group" aria-label={label}>
				{shown.map((o) => (
					<Checkbox key={o.id} label={o.name} description={o.description || undefined} checked={ids.includes(Number(o.id))} onChange={() => toggle(Number(o.id))} />
				))}
				{!shown.length ? <p className="bp-text-muted">{__('No matches.', 'pointly-booking')}</p> : null}
			</div>
		</div>
	);
}