import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { CatalogApi } from './api';
type Place = {
    latitude: number;
    longitude: number;
    label: string;
};
export function ClubLocationForm({ api }: {
    api: CatalogApi;
}): React.ReactElement {
    const [address, setAddress] = React.useState(''), [resolvedAddress, setResolvedAddress] = React.useState('');
    const [latitude, setLatitude] = React.useState(''), [longitude, setLongitude] = React.useState('');
    const [places, setPlaces] = React.useState<Place[]>([]), [selected, setSelected] = React.useState('');
    const [busy, setBusy] = React.useState(true), [error, setError] = React.useState(''), [notice, setNotice] = React.useState('');
    React.useEffect(() => {
        let active = true;
        void api.location().then(location => { if (active) {
            setAddress(location.address ?? '');
            setResolvedAddress(location.address ?? '');
            setLatitude(String(location.latitude ?? ''));
            setLongitude(String(location.longitude ?? ''));
        } })
            .catch(cause => { if (active)
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking')); })
            .finally(() => { if (active)
            setBusy(false); });
        return () => { active = false; };
    }, [api]);
    async function search(): Promise<void> {
        setBusy(true);
        setError('');
        setNotice('');
        setPlaces([]);
        setSelected('');
        try {
            const result = await api.searchLocation(address);
            setPlaces(result.results);
            if (!result.results.length)
                setNotice(__('No address found. Add the town and country, or enter coordinates manually.', 'abece-booking'));
        }
        catch (cause) {
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking'));
        }
        finally {
            setBusy(false);
        }
    }
    function choose(place: Place): void { setLatitude(String(place.latitude)); setLongitude(String(place.longitude)); setResolvedAddress(address); setSelected(place.label); setPlaces([]); setNotice(__('Coordinates filled in. Check the location, then save.', 'abece-booking')); }
    function coordinate(value: string, limit: number): number | null {
        const text = value.trim();
        if (!text)
            return null;
        const number = Number(text.replace(',', '.'));
        if (!/^[+-]?(?:\d+(?:[.,]\d*)?|[.,]\d+)$/.test(text) || !Number.isFinite(number) || Math.abs(number) > limit)
            throw new Error(__('Enter decimal coordinates within the stated ranges.', 'abece-booking'));
        return number;
    }
    async function save(event: React.FormEvent): Promise<void> {
        event.preventDefault();
        setBusy(true);
        setError('');
        setNotice('');
        try {
            await api.saveLocation({ address, latitude: coordinate(latitude, 90), longitude: coordinate(longitude, 180) });
            setNotice(__('Changes saved.', 'abece-booking'));
        }
        catch (cause) {
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking'));
        }
        finally {
            setBusy(false);
        }
    }
    const needsLookup = address.trim() !== '' && address !== resolvedAddress;
    return <details className="asb-editor" open><summary>{__('Club location', 'abece-booking')}</summary>
    <p>{__('Coordinates are used to calculate sunrise and sunset. Positive offsets mean later; negative offsets mean earlier.', 'abece-booking')}</p>
    {error && <p role="alert">{error}</p>}{notice && <p role="status">{notice}</p>}
    <form onSubmit={event => void save(event)}><fieldset disabled={busy}>
      <div className="asb-field"><label htmlFor="asb-location-address">{__('Venue address', 'abece-booking')}</label><input id="asb-location-address" type="text" autoComplete="street-address" maxLength={255} value={address} onChange={event => { setAddress(event.target.value); setPlaces([]); setSelected(''); setNotice(''); }} aria-describedby="asb-location-search-help"/></div>
      <p id="asb-location-search-help">{__('Enter the venue street, town and country.', 'abece-booking')} {__('Only clicking Find location sends this address to OpenStreetMap/Nominatim. Enter public venue addresses only.', 'abece-booking')}</p>
      <button className="button" type="button" disabled={address.trim().length < 3} onClick={() => void search()}>{__('Find location', 'abece-booking')}</button>
      {places.length > 0 && <section aria-label={__('Choose the matching address', 'abece-booking')}><h3>{__('Choose the matching address', 'abece-booking')}</h3><ul>{places.map((place, i) => <li key={i}><button className="button" type="button" onClick={() => choose(place)} style={{ whiteSpace: 'normal', textAlign: 'start' }}>{place.label}</button></li>)}</ul></section>}
      {selected && <p>{selected}</p>}
      <p><a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">© OpenStreetMap contributors</a> · <a href="https://operations.osmfoundation.org/policies/nominatim/" target="_blank" rel="noreferrer">{__('Address search service policy', 'abece-booking')}</a></p>
      <details open={!address}><summary>{__('Enter coordinates manually', 'abece-booking')}</summary><p id="asb-location-format">{__('Use decimal degrees, for example latitude 50.0755 and longitude 14.4378. A decimal comma is also accepted.', 'abece-booking')}</p><div className="asb-fields">
        <div className="asb-field"><label htmlFor="asb-latitude">{__('Latitude', 'abece-booking')}</label><input id="asb-latitude" type="text" inputMode="decimal" placeholder="50.0755" aria-describedby="asb-location-format asb-latitude-range" value={latitude} onChange={event => { setLatitude(event.target.value); setResolvedAddress(address); }}/><small id="asb-latitude-range">−90 … 90</small></div>
        <div className="asb-field"><label htmlFor="asb-longitude">{__('Longitude', 'abece-booking')}</label><input id="asb-longitude" type="text" inputMode="decimal" placeholder="14.4378" aria-describedby="asb-location-format asb-longitude-range" value={longitude} onChange={event => { setLongitude(event.target.value); setResolvedAddress(address); }}/><small id="asb-longitude-range">−180 … 180</small></div>
      </div></details>
      {needsLookup && <p role="status">{__('Choose an address search result or update the coordinates manually before saving.', 'abece-booking')}</p>}
      <p><button className="button" type="submit" disabled={needsLookup}>{__('Save location', 'abece-booking')}</button></p>
    </fieldset></form>
  </details>;
}