/**
 * HitsPerPage Component
 *
 * A dropdown to let users change the number of displayed hits per page
 * Integrates with SearchStateManager for automatic state sync
 */
import React, { useEffect } from "react";
import { useSearchContext } from "./SearchProvider";
import { useSearchState } from "../hooks/useSearchState";
import { clsx } from "clsx";
import { CustomSelect } from "./primitives/CustomSelect";
import { ensureSeekoraStyles } from "../styles/inject";
export const HitsPerPage = ({ items, onHitsPerPageChange, renderSelect, className, style, theme: customTheme, label = "Show", syncWithState = true, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { theme } = useSearchContext();
    const { itemsPerPage, setPage } = useSearchState();
    const { stateManager } = useSearchContext();
    const hitsPerPageTheme = customTheme || {};
    // Find the default item or first item
    const defaultItem = items.find((i) => i.default) || items[0];
    const [internalValue, setInternalValue] = React.useState(defaultItem?.value || 10);
    // Initialize StateManager on mount if default is set
    useEffect(() => {
        if (syncWithState && defaultItem && itemsPerPage !== defaultItem.value) {
            stateManager.setItemsPerPage(defaultItem.value, false);
        }
    }, []);
    // Determine the current value from StateManager or internal
    const value = syncWithState ? itemsPerPage : internalValue;
    const handleChange = (e) => {
        const newValue = parseInt(e.target.value, 10);
        setInternalValue(newValue);
        // Update StateManager
        if (syncWithState) {
            stateManager.setItemsPerPage(newValue, false);
            // Reset to page 1 when changing items per page
            setPage(1, true);
        }
        // Call callback
        if (onHitsPerPageChange) {
            onHitsPerPageChange(newValue);
        }
    };
    // Custom render function
    if (renderSelect) {
        return (React.createElement("div", { className: clsx(hitsPerPageTheme.root, className), style: style }, renderSelect({
            value,
            onChange: handleChange,
            items,
        })));
    }
    return (React.createElement("div", { className: clsx("seekora-hits-per-page", hitsPerPageTheme.root, className), style: style },
        label && React.createElement("label", { className: "seekora-hits-per-page__label" }, label),
        React.createElement(CustomSelect, { value: String(value), onChange: (val) => {
                const newValue = parseInt(val, 10);
                setInternalValue(newValue);
                if (syncWithState) {
                    stateManager.setItemsPerPage(newValue, false);
                    setPage(1, true);
                }
                if (onHitsPerPageChange) {
                    onHitsPerPageChange(newValue);
                }
            }, options: items.map((item) => ({
                value: String(item.value),
                label: item.label,
            })), "aria-label": "Results per page", className: clsx("seekora-hits-per-page__select", hitsPerPageTheme.select) })));
};
