"use strict";
exports.id = 92631;
exports.ids = [92631];
exports.modules = {

/***/ 92631:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003);
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(71853);
/* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(45515);
/* harmony import */ var _SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _dls_Link_Link__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(61239);
/* harmony import */ var _hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(56748);
/* harmony import */ var _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3050);
/* harmony import */ var _utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(55943);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__]);
_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];









const ScrollableSelection = ({ items , searchPlaceholder , renderItem , getHref , isJuz =true , selectedItem ,  })=>{
    const { 0: searchQuery , 1: setSearchQuery  } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("");
    const router = (0,next_router__WEBPACK_IMPORTED_MODULE_3__.useRouter)();
    const filteredItems = items.filter((item)=>item.value.toString().startsWith(searchQuery) || item.label.toString().startsWith(searchQuery));
    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
        if (!filteredItems.length) {
            (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__/* .logEmptySearchResults */ .Dy)({
                query: searchQuery,
                source: isJuz ? _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationJuzsList */ .Z.SidebarNavigationJuzsList : _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationPagesList */ .Z.SidebarNavigationPagesList
            });
        } else {
            (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__/* .logTextSearchQuery */ .tL)(searchQuery, isJuz ? _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationJuzsList */ .Z.SidebarNavigationJuzsList : _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationPagesList */ .Z.SidebarNavigationPagesList);
        }
    }, [
        searchQuery,
        filteredItems,
        isJuz
    ]);
    const [scroll, selectedItemRef] = (0,_hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__/* .useScrollToElement */ .Oz)(_hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__/* .SCROLL_TO_NEAREST_ELEMENT */ .lT);
    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
        scroll();
    }, [
        selectedItem,
        scroll
    ]);
    // handle when user press `Enter` in input box
    const handleInputSubmit = (e)=>{
        e.preventDefault();
        const firstFilteredItem = filteredItems[0];
        if (filteredItems) {
            const href = getHref(firstFilteredItem.value);
            router.push(href);
        }
    };
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
        className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().scrollableSectionContainer),
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("form", {
                onSubmit: handleInputSubmit,
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                    className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().searchInput),
                    value: searchQuery,
                    onChange: (e)=>setSearchQuery(e.target.value),
                    placeholder: searchPlaceholder
                })
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().listContainer),
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                    className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().list),
                    children: filteredItems.map((item)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Link_Link__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                            href: getHref(item.value),
                            shouldPrefetch: false,
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                                ref: item.value === selectedItem ? selectedItemRef : null,
                                className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().listItem), item.value === selectedItem && (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().selectedItem)),
                                children: renderItem(item)
                            })
                        }, item.value))
                })
            })
        ]
    });
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ScrollableSelection);

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 3050:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
var SearchQuerySource;
(function(SearchQuerySource) {
    SearchQuerySource["CommandBar"] = "command_bar";
    SearchQuerySource["SearchDrawer"] = "search_drawer";
    SearchQuerySource["SearchPage"] = "search_page";
    SearchQuerySource["TranslationSettingsDrawer"] = "settings_drawer_translation";
    SearchQuerySource["TafsirSettingsDrawer"] = "settings_drawer_tafsir";
    SearchQuerySource["ReciterPageChapterList"] = "reciter_page_chapter_list";
    SearchQuerySource["Tarteel"] = "tarteel";
    SearchQuerySource["SidebarNavigationChaptersList"] = "sidebar_navigation_chapter_list";
    SearchQuerySource["SidebarNavigationVersesList"] = "sidebar_navigation_verse_list";
    SearchQuerySource["SidebarNavigationJuzsList"] = "sidebar_navigation_juz_list";
    SearchQuerySource["SidebarNavigationPagesList"] = "sidebar_navigation_page_list";
})(SearchQuerySource || (SearchQuerySource = {}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SearchQuerySource);


/***/ })

};
;
//# sourceMappingURL=92631.js.map