import React__default, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
import { F as FilterPickerContent } from './FilterPickerContent-es.js';
import { F as FilterPickerAction } from './FilterPickerAction-es.js';
import { F as FilterPickerContextProvider } from './FilterPickerProvider-es.js';
import { F as FilterPickerTrigger } from './FilterPickerTrigger-es.js';
import { F as FilterPickerOption } from './FilterPickerOption-es.js';
import { n as noop } from './noop-es.js';
import { useDebounce } from '@jobber/hooks';
import { F as FilterPickerActivator } from './FilterPickerActivator-es.js';

var styles = {"overlay":"pWccl-Pw3hY-","wrapper":"CGh3PQqBZ1c-","spinning":"Cf-fmDM7clM-"};

function useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
    const handleClose = useCallback(() => {
        setOpen(false);
        setSearchValue("");
        onSearch && onSearch("");
        onClose && onClose();
        if (selectedOptions.length > 0) {
            shouldScroll.current = true;
        }
    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
    const handleOpen = useCallback(() => {
        setOpen(true);
    }, [setOpen]);
    const handleSelection = useCallback((selection) => {
        if (multiSelect) {
            handleMultiSelect(selectedStateSetter, selectedOptions, selection);
        }
        else {
            handleSingleSelect(selectedStateSetter, selection);
        }
    }, [multiSelect, selectedStateSetter, selectedOptions]);
    const handleSingleSelect = useCallback((selectCallback, selection) => {
        selectCallback([selection]);
        handleClose();
    }, []);
    return {
        handleClose,
        handleSelection,
        handleOpen,
    };
}
function handleMultiSelect(selectCallback, selected, selection) {
    if (selected.some(s => s.id === selection.id)) {
        selectCallback(selected.filter(s => s.id !== selection.id));
    }
    else {
        selectCallback([...selected, selection]);
    }
}

function useFilterPicker(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
    const wrapperRef = useRef(null);
    const shouldScroll = useRef(false);
    const [open, setOpen] = useState(false);
    const [searchValue, setSearchValue] = useState("");
    const searchCallback = useDebounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
    const { handleClose, handleSelection, handleOpen } = useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
    const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
    return {
        wrapperRef,
        searchValue,
        setSearchValue,
        open,
        selectedOptions: selected,
        selectedStateSetter: onSelect,
        shouldScroll,
        handleClose,
        handleSelection,
        handleOpen,
        internalFilteredOptions,
        handleSearchChange: onSearch ? searchCallback : noop,
    };
}

function useFilterPickerValidation(children) {
    const optionElements = getCompoundComponents(FilterPickerOption, children);
    const actionElements = getCompoundComponents(FilterPickerAction, children);
    const activatorElements = getCompoundComponents(FilterPickerActivator, children);
    return {
        optionElements,
        triggerElement: activatorElements[0],
        actionElements,
    };
}
/**
 * Return all instances child component that matches the `type` provided
 */
function getCompoundComponents(type, children) {
    const childrenArray = Children.toArray(children);
    const elements = childrenArray.filter((child) => isValidElement(child) && child.type === type);
    return elements;
}

function FilterPicker(props) {
    const { optionElements, triggerElement, actionElements } = useFilterPickerValidation(props.children);
    const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => (Object.assign({}, option.props)))) || [], [optionElements]);
    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useFilterPicker(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
    return (React__default.createElement(FilterPickerContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
        React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper },
            open && (React__default.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-FilterPicker-Overlay" })),
            triggerElement || (React__default.createElement(FilterPickerTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
            React__default.createElement(FilterPickerContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
}
FilterPicker.Activator = FilterPickerActivator;
FilterPicker.Action = FilterPickerAction;
FilterPicker.Option = FilterPickerOption;

export { FilterPicker as F };
