import { useEffect, useRef } from 'react';
import DSAutocomplete from '@scottish-government/design-system/dist/scripts/components/autocomplete/autocomplete';
import Button from '../Button';
import { SiteSearchProps, SuggestionMappingFunctionProps } from './types';
import clsx from 'clsx';

const SiteSearch = function ({
    action = '/search',
    autocompleteEndpoint,
    autocompleteSuggestionMappingFunction,
    className,
    id = 'site-search',
    method = 'GET',
    minLength = 3,
    name = 'q',
    placeholder = 'Search',
    ...props
}: SiteSearchProps) {
    const ref = useRef(null);
    const hasAutocomplete = !!autocompleteEndpoint;
    const autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';

    type AutoCompleteOptions = {
        minLength?: number,
        suggestionMappingFunction?: SuggestionMappingFunctionProps,
        throttleDelay?: number
    }

    useEffect(() => {
        const autocompleteElement = document.getElementById(autocompleteId);
        if (hasAutocomplete && autocompleteElement && ref.current) {
            const options: AutoCompleteOptions = {};
            if (minLength) {
                options.minLength = minLength;
            }
            if (autocompleteSuggestionMappingFunction) {
                options.suggestionMappingFunction = autocompleteSuggestionMappingFunction
            }

            const autocomplete = new DSAutocomplete(
                autocompleteElement,
                autocompleteEndpoint,
                options
            );

            autocomplete.init();
        }
    }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);

    return (
        <div
            className={clsx([
                'ds_site-search',
                className,
                hasAutocomplete && 'ds_autocomplete'
            ])}
            id={autocompleteId ? autocompleteId : undefined}
            ref={ref}
            {...props}
        >

            <form role="search" className="ds_site-search__form" method={method} action={action}>
                <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>

                {hasAutocomplete && (
                    <div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>
                )}

                <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined}
                        aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined}
                        autoComplete={hasAutocomplete ? 'off' : undefined}
                        className={clsx([
                            'ds_input',
                            'ds_site-search__input',
                            hasAutocomplete && 'js-autocomplete-input'
                        ])}
                        id={id}
                        name={name}
                        placeholder={placeholder}
                        required
                        spellCheck="false"
                        type="search"
                    />

                    <Button type="submit" icon="Search" isIconOnly>Search</Button>

                    {hasAutocomplete && (
                        <div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
                            <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>
                        </div>
                    )}
                </div>
            </form>
        </div>
    );
};

SiteSearch.displayName = 'SiteSearch';

export default SiteSearch;