'use strict';

var React = require('react');
var FilterPickerContent = require('./FilterPickerContent-cjs.js');
var FilterPickerAction = require('./FilterPickerAction-cjs.js');
var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
var FilterPickerTrigger = require('./FilterPickerTrigger-cjs.js');
var FilterPickerOption = require('./FilterPickerOption-cjs.js');
var noop = require('./noop-cjs.js');
var jobberHooks = require('@jobber/hooks');
var FilterPickerActivator = require('./FilterPickerActivator-cjs.js');

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

function useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
    const handleClose = React.useCallback(() => {
        setOpen(false);
        setSearchValue("");
        onSearch && onSearch("");
        onClose && onClose();
        if (selectedOptions.length > 0) {
            shouldScroll.current = true;
        }
    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
    const handleOpen = React.useCallback(() => {
        setOpen(true);
    }, [setOpen]);
    const handleSelection = React.useCallback((selection) => {
        if (multiSelect) {
            handleMultiSelect(selectedStateSetter, selectedOptions, selection);
        }
        else {
            handleSingleSelect(selectedStateSetter, selection);
        }
    }, [multiSelect, selectedStateSetter, selectedOptions]);
    const handleSingleSelect = React.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 = React.useRef(null);
    const shouldScroll = React.useRef(false);
    const [open, setOpen] = React.useState(false);
    const [searchValue, setSearchValue] = React.useState("");
    const searchCallback = jobberHooks.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.noop,
    };
}

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

function FilterPicker(props) {
    const { optionElements, triggerElement, actionElements } = useFilterPickerValidation(props.children);
    const options = React.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.createElement(FilterPickerProvider.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.createElement("div", { ref: wrapperRef, className: styles.wrapper },
            open && (React.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-FilterPicker-Overlay" })),
            triggerElement || (React.createElement(FilterPickerTrigger.FilterPickerTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
            React.createElement(FilterPickerContent.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.FilterPickerActivator;
FilterPicker.Action = FilterPickerAction.FilterPickerAction;
FilterPicker.Option = FilterPickerOption.FilterPickerOption;

exports.FilterPicker = FilterPicker;
