import React__default, { useMemo, useRef, useState, useCallback, forwardRef, useImperativeHandle, useReducer, useEffect } from 'react';
import { Search } from '@hhgtech/icons/core';
import { Skeleton, clsx, Box, Input, rem, ScrollArea, useMantineTheme, Stack, Flex, Text as Text$1, Select, Divider, Tabs } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { P as PinIcon, i as checkMarkIconUrl, h as getApiPath, u as useGeolocation } from './utils-4a831e42.js';
import { a as useOutsideClick } from './useOutsideClick-6e9d583e.js';
import { u as useTranslations } from './index-8cd8aef7.js';
import debounce from 'lodash/debounce';
import { a as ID_OPTION_CURRENT_LOCATION, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY, M as MAPPING_CLIENT_WITH_SLUG } from './constants-4839e0ba.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { M as MediaQueries } from './utils-3346ba5f.js';
import { C as Container } from './index-c1c199f0.js';
import { T as Text } from './index-cb974729.js';
import { C as ChevronDown } from './ChevronDown-d96d5d35.js';
import { _ as __rest } from './tslib.es6-708e7260.js';
import { ArrowLeft } from '@hhgtech/icons/arrow';
import { M as Modal } from './index-064f7258.js';
import { P as PATHS } from './paths-1735dc0c.js';
import { B as Button } from './index-4ecade52.js';

const StyledSearchBarWrapper = styled.div ``;
const StyleWrapperContainer = styled.div `
  background-color: ${theme.colors.neutral50};
  padding-bottom: 1px;
  ${MediaQueries.mbDown} {
    padding: 0;
  }
`;
const StyleSearchInputContainer = styled(Container) `
  padding: 0 16px;

  ${MediaQueries.mbDown} {
    padding: 0;
  }
`;
const StyleSearchContent = styled.div `
  padding: 24px 56px;
  border-radius: 16px;
  background-color: ${theme.colors.white};
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.04),
    0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);

  ${MediaQueries.mbDown} {
    padding: 16px;
    border-radius: 0;
  }

  .flex-search-input {
    flex-direction: row;
    ${MediaQueries.mbDown} {
      flex-direction: column;
    }
  }
`;

const SEARCH_KEYWORD_MIN_LENGTH = {
    'en-PH': 3,
    'tl-PH': 2,
    'id-ID': 3,
    'vi-VN': 2,
    'zh-TW': 0,
    'ms-MY': 2,
    'th-TH': 2,
};

const initialState = {
    isMobile: false,
    isDebug: false,
    navigateTo: null,
    geoLocationPermission: 'unset',
    geoLocationCoordinates: null,
    focused: 'none',
    focusedSpecialty: 'none',
    searchLocationKeywords: '',
    searchSpecialtyKeywords: '',
    searchKeywords: '',
    selectedLocation: null,
    selectedSpecialty: null,
    defaultCity: null,
    initialCities: [],
    cities: [],
    searchResults: {},
    initialSearchResults: {},
    isLoadingCities: false,
    isLoadingSearchResults: false,
    isMobileModalOpened: false,
    initialSelectedCity: null,
    autoCompleteDisabled: false,
    inputSearchPlaceholder: '',
    locale: 'vi-VN',
    allSpecialties: [],
    popularKeys: [],
};
var ActionTypes;
(function (ActionTypes) {
    ActionTypes["NavigateTo"] = "navigate to url";
    ActionTypes["ClickOutsideInputLocation"] = "click outside input location";
    ActionTypes["ClickOutsideInputSearch"] = "click outside input search";
    ActionTypes["ClickOutsideInputSearchSpecialty"] = "click outside input search specialty";
    ActionTypes["ClickOutsideInputSpecialty"] = "click outside input specialty";
    ActionTypes["SelectCurrentLocation"] = "select current location";
    ActionTypes["FocusInputLocation"] = "focus input location";
    ActionTypes["FocusInputSearch"] = "focus input search";
    ActionTypes["FocusInputSearchSpecialty"] = "focus input search specialty";
    ActionTypes["ChangeInputLocation"] = "change input location";
    ActionTypes["ChangeInputSearch"] = "change input search";
    ActionTypes["ClearInputLocation"] = "clear input location";
    ActionTypes["ClearInputSearch"] = "clear input search";
    ActionTypes["SelectLocation"] = "select location";
    ActionTypes["SelectSpecialty"] = "select specialty";
    ActionTypes["FetchCitiesStart"] = "fetch cities start";
    ActionTypes["FetchCitiesFinish"] = "fetch cities finish";
    ActionTypes["FetchSearchResultsStart"] = "fetch search results start";
    ActionTypes["FetchSearchResultsComplete"] = "fetch search results complete";
    ActionTypes["FetchSearchResultsFinish"] = "fetch search results finish";
    ActionTypes["FetchCitiesByGeoIpComplete"] = "fetch cities by geo IP finish";
    ActionTypes["FetchCitiesByKeywordComplete"] = "fetch cities by keyword finish";
    ActionTypes["DisplayInitialCities"] = "display initial cities";
    ActionTypes["DisplayInitialSearchResults"] = "display initial search results";
    ActionTypes["UpdateInitialSearchResults"] = "update initial search results";
    ActionTypes["GrantGeoLocationPermission"] = "grant geolocation permission";
    ActionTypes["DenyGeoLocationPermission"] = "deny geolocation permission";
    ActionTypes["OpenMobileModal"] = "open mobile modal";
    ActionTypes["CloseMobileModal"] = "close mobile modal";
    ActionTypes["UpdateInitialSearchValue"] = "update initial search value";
    ActionTypes["SelectSearchResult"] = "select search result";
    ActionTypes["SetInputSearchPlaceholder"] = "set input search placeholder";
    ActionTypes["FocusInputSpecialty"] = "focus input specialty";
    ActionTypes["FetchAllSpecialties"] = "fetch all specialty";
    ActionTypes["FetchPopularKeys"] = "fetch popular key by type";
})(ActionTypes || (ActionTypes = {}));
function resetSearchLocationKeywords(state) {
    const { selectedLocation, searchLocationKeywords } = state;
    if (selectedLocation && searchLocationKeywords !== selectedLocation.name) {
        return Object.assign(Object.assign({}, state), { searchLocationKeywords: selectedLocation.name });
    }
    return state;
}
function reducer(state, action) {
    var _a, _b;
    if (state.isDebug) {
        console.log('bookingSearchBarV3', { action, state });
    }
    switch (action.type) {
        case ActionTypes.NavigateTo:
            return Object.assign(Object.assign({}, state), { navigateTo: action.payload, focused: 'none', isMobileModalOpened: false });
        case ActionTypes.ClickOutsideInputLocation: {
            if (state.focused !== 'location') {
                return state;
            }
            return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
        }
        case ActionTypes.ClickOutsideInputSpecialty: {
            if (state.focused !== 'specialty') {
                return state;
            }
            return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
        }
        case ActionTypes.ClickOutsideInputSearch: {
            if (state.focused !== 'search') {
                return state;
            }
            return Object.assign(Object.assign({}, state), { focused: 'none' });
        }
        case ActionTypes.ClickOutsideInputSearchSpecialty: {
            if (state.focusedSpecialty !== 'search') {
                return state;
            }
            return Object.assign(Object.assign({}, state), { focusedSpecialty: 'none' });
        }
        case ActionTypes.FocusInputLocation: {
            const nextState = Object.assign(Object.assign({}, state), { focused: 'location' });
            if (((_a = state.selectedLocation) === null || _a === void 0 ? void 0 : _a.id) === ID_OPTION_CURRENT_LOCATION) {
                nextState.searchLocationKeywords = '';
            }
            return nextState;
        }
        case ActionTypes.FocusInputSpecialty: {
            const nextState = Object.assign(Object.assign({}, state), { focused: 'specialty' });
            if (((_b = state.selectedLocation) === null || _b === void 0 ? void 0 : _b.id) === ID_OPTION_CURRENT_LOCATION) {
                nextState.searchLocationKeywords = '';
            }
            return nextState;
        }
        case ActionTypes.FocusInputSearch:
            const nextState = Object.assign(Object.assign({}, state), { focused: 'search' });
            if (state.isMobile) {
                return resetSearchLocationKeywords(nextState);
            }
            return nextState;
        case ActionTypes.FocusInputSearchSpecialty: {
            const nextState = Object.assign(Object.assign({}, state), { focusedSpecialty: 'search' });
            return nextState;
        }
        case ActionTypes.ChangeInputLocation:
            return Object.assign(Object.assign({}, state), { searchLocationKeywords: action.payload });
        case ActionTypes.ChangeInputSearch: {
            const keyword = action.payload;
            return Object.assign(Object.assign({}, state), { searchKeywords: keyword, isLoadingSearchResults: keyword.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] });
        }
        case ActionTypes.SelectCurrentLocation:
            return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name });
        case ActionTypes.ClearInputLocation:
            return Object.assign(Object.assign({}, state), { focused: 'location', cities: state.initialCities, searchLocationKeywords: '' });
        case ActionTypes.ClearInputSearch:
            return Object.assign(Object.assign({}, state), { focused: 'search', searchKeywords: '' });
        case ActionTypes.SelectLocation:
            return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name, searchResults: {} });
        case ActionTypes.SelectSpecialty:
            return Object.assign(Object.assign({}, state), { focused: 'none', selectedSpecialty: action.payload, searchResults: {} });
        case ActionTypes.SelectSearchResult:
            return Object.assign(Object.assign({}, state), { searchKeywords: action.payload.name, isMobileModalOpened: false, focused: 'none', navigateTo: action.payload.url });
        case ActionTypes.FetchCitiesStart:
            return Object.assign(Object.assign({}, state), { isLoadingCities: true });
        case ActionTypes.FetchCitiesFinish:
            return Object.assign(Object.assign({}, state), { isLoadingCities: false });
        case ActionTypes.FetchSearchResultsStart:
            return Object.assign(Object.assign({}, state), { isLoadingSearchResults: true });
        case ActionTypes.FetchSearchResultsFinish:
            return Object.assign(Object.assign({}, state), { isLoadingSearchResults: false });
        case ActionTypes.FetchSearchResultsComplete: {
            const nextState = Object.assign(Object.assign({}, state), { searchResults: Object.assign(Object.assign({}, state.searchResults), { [action.payload.key]: action.payload.searches }) });
            return nextState;
        }
        case ActionTypes.FetchCitiesByGeoIpComplete: {
            let { cities } = action.payload;
            const { default: defaultCity } = action.payload;
            cities = cities.filter((c) => c.id !== defaultCity.id);
            if (defaultCity) {
                cities.unshift(defaultCity);
            }
            if (state.initialSelectedCity &&
                !cities.find((c) => c.id === state.initialSelectedCity.id)) {
                cities.unshift(state.initialSelectedCity);
            }
            const nextState = Object.assign(Object.assign({}, state), { defaultCity, initialCities: cities, cities });
            if (state.geoLocationPermission === 'denied' &&
                !state.initialSelectedCity) {
                nextState.selectedLocation = defaultCity;
                nextState.searchLocationKeywords = defaultCity.name;
            }
            return nextState;
        }
        case ActionTypes.FetchCitiesByKeywordComplete:
            return Object.assign(Object.assign({}, state), { cities: action.payload });
        case ActionTypes.DisplayInitialCities:
            return Object.assign(Object.assign({}, state), { cities: state.initialCities });
        case ActionTypes.DisplayInitialSearchResults: {
            const trimmed = state.searchKeywords.trim();
            const minLen = SEARCH_KEYWORD_MIN_LENGTH[state.locale];
            const shouldShowEmpty = trimmed.length > 0 && trimmed.length <= minLen;
            return Object.assign(Object.assign({}, state), { searchResults: shouldShowEmpty ? {} : state.initialSearchResults, isLoadingSearchResults: false });
        }
        case ActionTypes.UpdateInitialSearchResults:
            return Object.assign(Object.assign({}, state), { initialSearchResults: Object.assign(Object.assign({}, state.initialSearchResults), { [action.payload.key]: action.payload.searches }) });
        case ActionTypes.GrantGeoLocationPermission:
            return Object.assign(Object.assign({}, state), { geoLocationPermission: 'granted', geoLocationCoordinates: action.payload });
        case ActionTypes.DenyGeoLocationPermission:
            return Object.assign(Object.assign({}, state), { geoLocationPermission: 'denied', geoLocationCoordinates: null });
        case ActionTypes.OpenMobileModal:
            return Object.assign(Object.assign({}, state), { isMobileModalOpened: true });
        case ActionTypes.CloseMobileModal:
            return Object.assign(Object.assign({}, state), { isMobileModalOpened: false });
        case ActionTypes.UpdateInitialSearchValue:
            return Object.assign(Object.assign({}, state), { searchKeywords: action.payload });
        case ActionTypes.SetInputSearchPlaceholder:
            return Object.assign(Object.assign({}, state), { inputSearchPlaceholder: action.payload });
        case ActionTypes.FetchAllSpecialties:
            return Object.assign(Object.assign({}, state), { allSpecialties: action.payload });
        case ActionTypes.FetchPopularKeys:
            return Object.assign(Object.assign({}, state), { popularKeys: action.payload });
        default:
            return state;
    }
}

const StyleSearchInputsWrapper = styled.div `
  flex: 1;
  position: relative;

  ${MediaQueries.mbDown} {
    width: 100%;
  }
`;
const StyleSearchBarContainer = styled.div `
  background: #f7f9fc;
  border-radius: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 4px 12px 4px 4px;
  gap: 16px;

  ${MediaQueries.mbDown} {
    height: 48px;
    width: 100%;
  }
`;
const StyleSearchIconWrapper = styled.div `
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #8c8c8c;

  svg {
    width: 18px;
    height: 18px;
  }
`;
const StyleResultWrapper = styled.div `
  position: absolute;
  top: calc(100% + 2px);
  width: 100%;
  border-radius: 4px;
  background: ${theme.colors.white};
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;

  ${MediaQueries.mbDown} {
    width: calc(100% + 64px);
    left: -32px;
  }
`;

const StyledSearchResultWrapper = styled.div ``;
styled.div `
  display: flex;
  justify-content: space-between;
  align-item: center;
  padding: 9px 14px 9px 22px;
  background: #f7f9fc;

  .title {
    color: ${theme.colors.gray800};
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }

  .btn-see-all {
    color: ${theme.colors.blue600};
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
  }
`;
const StyleResultBody = styled.div `
  padding: 10px 16px;
  max-height: 400px;
  overflow: auto;
`;
const StyleResultItem = styled.div `
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;

  ${MediaQueries.mbUp} {
    &:hover {
      background-color: ${theme.colors.blue50};
    }
  }

  .image-item {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;

    img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .infor {
    overflow: hidden;
    padding: 12px 0;
    flex: 1;
    border-bottom: 1px solid ${theme.colors.neutral100};
    .title {
      color: ${theme.colors.gray800};
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
    }
    .description {
      overflow: hidden;
      color: ${theme.colors.gray600};
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      line-height: 18px;
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 5px;

      svg {
        flex: 0 0 16px;
      }

      .sub-description {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
      }
    }
  }

  &.last-item {
    .infor {
      border-bottom: none;
    }
  }
`;
styled.div `
  padding: 0 16px 16px;

  .search-detail-btn {
    color: ${theme.colors.blue600};
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
  }
`;

const SearchResult = ({ state, type, results, 
// location,
isLoading, typeInformation, 
// clientSlug = '',
dispatch, }) => {
    const { t } = useTranslations();
    const { selectedLocation } = state;
    const typeSlug = useMemo(() => typeInformation[type].slug, [typeInformation, type]);
    const handleOnClick = (item) => {
        let url = '';
        switch (type) {
            case 'service':
                url = `/${selectedLocation.slug}/${typeSlug}/${item.slug}`;
                break;
            case 'doctor':
            case 'hospital':
                url = `/${typeSlug}/${item.slug}-${item.id}`;
                break;
        }
        if (url) {
            dispatch({
                type: ActionTypes.NavigateTo,
                payload: url,
            });
        }
    };
    // const handleSeeAll = () => {
    //   let url = `/${selectedLocation.slug}/${typeSlug}`
    //   const slugClientUrl = MAPPING_CLIENT_WITH_SLUG[locale][clientSlug]
    //   if (slugClientUrl) {
    //     url += `/${slugClientUrl}`
    //   }
    //   if (
    //     (type === 'doctor' || type === 'hospital') &&
    //     state.selectedSpecialty.id > 0
    //   ) {
    //     url += `?specialtyId=${state.selectedSpecialty.id}`
    //   }
    //   if (url) {
    //     dispatch({ type: ActionTypes.NavigateTo, payload: url })
    //   }
    // }
    if (results === null)
        return null;
    return (React__default.createElement(StyledSearchResultWrapper, null,
        React__default.createElement(StyleResultBody, { className: "search-results__body" },
            isLoading && (React__default.createElement("div", { className: "skeleton-result" }, Array(3)
                .fill(undefined)
                .map((_, i) => (React__default.createElement(StyleResultItem, { key: type + 'loading' + i, className: i === 2 ? 'last-item' : '' },
                React__default.createElement("div", { className: "image-item" },
                    React__default.createElement(Skeleton, { height: 48, circle: true, mb: "xl", animate: true })),
                React__default.createElement("div", { className: "infor" },
                    React__default.createElement("div", { className: "title" },
                        React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", animate: true })),
                    React__default.createElement("div", { className: "description" },
                        React__default.createElement("div", { className: "sub-description" },
                            React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", width: "80%", animate: true }))))))))),
            !isLoading && results && results.length > 0 && (React__default.createElement(React__default.Fragment, null, results.map((item, index) => {
                var _a, _b;
                const isLastItem = (results.length > 4 && index === 3) ||
                    (results.length <= 4 && index === results.length - 1);
                let subDescription = '';
                if (type === 'hospital') {
                    subDescription = (item === null || item === void 0 ? void 0 : item.address) || '';
                }
                if (type === 'doctor') {
                    subDescription = ((_a = item === null || item === void 0 ? void 0 : item.specialties) === null || _a === void 0 ? void 0 : _a.join(', ')) || '';
                }
                if (type === 'service') {
                    subDescription = ((_b = item === null || item === void 0 ? void 0 : item.hospital_branch) === null || _b === void 0 ? void 0 : _b.name) || '';
                }
                if (index >= 4) {
                    return React__default.createElement(React__default.Fragment, null);
                }
                return (React__default.createElement(StyleResultItem, { key: item.id, className: clsx(isLastItem ? 'last-item' : '', 'result-item'), onClick: () => handleOnClick(item) },
                    React__default.createElement("div", { className: "image-item" },
                        React__default.createElement("img", { src: item.logo || item.avatar, alt: item.name })),
                    React__default.createElement("div", { className: "infor" },
                        React__default.createElement("div", { className: "title" }, item.name),
                        React__default.createElement("div", { className: "description" },
                            typeInformation[type].icon,
                            React__default.createElement("div", { className: "sub-description" }, subDescription)))));
            }))),
            !isLoading && (results === null || results === void 0 ? void 0 : results.length) === 0 && (React__default.createElement(Text, { size: "sm", color: theme.colors.gray400, className: "noresult-block" }, t('booking.searchBar.noResults'))))));
};

const SearchResultContent = ({ state, type, isLoading, clientSlug, typeInformation, dispatch, }) => {
    var _a;
    if (state.focused !== 'search')
        return null;
    return (React__default.createElement(SearchResult, { type: type, state: state, results: ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a[type]) || null, location: state.selectedLocation.name, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug }));
};

const StyleSearchSpecialtyWrapper = styled.div `
  position: relative;
  flex-shrink: 0;

  ${MediaQueries.mbDown} {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  &.compact {
    ${MediaQueries.mbDown} {
      width: auto;
      display: block;
    }
  }
`;
const StyleDropdownPanel = styled.div `
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 264px;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.04),
    0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 10px 16px 0px rgba(0, 0, 0, 0.04);
  z-index: 10;
  overflow: hidden;

  &.mobile {
    min-width: 280px;
  }
`;
const StyledSpecialtyItem = styled.div `
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  outline: none;

  .image-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .item-label {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: ${theme.colors.gray800};
  }

  &:hover {
    background-color: ${theme.colors.neutral50};
  }

  &.selected {
    background-color: ${theme.colors.neutral50};
  }

  &:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
`;

const DoctorIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default.createElement("path", { d: "M8.983 14.333q-1.666 0-2.833-1.166Q4.983 12 4.983 10.333v-.366a3.48 3.48 0 0 1-2.258-1.2 3.57 3.57 0 0 1-.909-2.434V3.1a.58.58 0 0 1 .175-.425.58.58 0 0 1 .425-.175h1.4v-.167a.486.486 0 0 1 .5-.5q.217 0 .36.142a.5.5 0 0 1 .14.358v1.334a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V3.5h-1v2.833q0 1.1.784 1.884Q4.383 9 5.483 9t1.883-.783.784-1.884V3.5h-1v.167a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V2.333a.486.486 0 0 1 .5-.5q.217 0 .358.142a.5.5 0 0 1 .142.358V2.5h1.4a.58.58 0 0 1 .425.175.58.58 0 0 1 .175.425v3.233q0 1.4-.908 2.434a3.5 3.5 0 0 1-2.259 1.2v.366q0 1.25.875 2.126a2.9 2.9 0 0 0 2.125.874q1.25 0 2.125-.874a2.9 2.9 0 0 0 .875-2.126V9.25a1.74 1.74 0 0 1-.858-.609 1.6 1.6 0 0 1-.342-1.008q0-.716.5-1.216t1.2-.5q.716 0 1.217.5.5.5.5 1.216 0 .567-.342 1.008t-.875.609v1.083q0 1.667-1.167 2.834-1.166 1.166-2.833 1.166m3.5-6q.3 0 .509-.208a.67.67 0 0 0 .208-.492q0-.3-.208-.508a.7.7 0 0 0-.509-.208q-.3 0-.5.208a.7.7 0 0 0-.2.508q0 .284.2.492t.5.208", fill: "#595959" })));
const ServiceIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default.createElement("path", { d: "M6.868 9.265v.974q0 .405.284.69.284.283.69.283t.69-.284.284-.69v-.973h.973q.405 0 .69-.284a.94.94 0 0 0 .284-.689.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284h-.973v-.974a.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284.94.94 0 0 0-.689.284.94.94 0 0 0-.285.69v.974h-.973a.94.94 0 0 0-.69.283.94.94 0 0 0-.284.69q0 .405.284.69.285.284.69.284zm-3.46 4.868q-.581 0-.994-.413A1.36 1.36 0 0 1 2 12.725v-6.65a1.4 1.4 0 0 1 .563-1.127l4.434-3.333q.369-.282.844-.282.474 0 .846.282l4.434 3.333q.264.193.413.493.15.3.15.633v6.651q0 .58-.414.995a1.36 1.36 0 0 1-.994.413zm0-1.168h8.868q.105 0 .172-.068a.23.23 0 0 0 .068-.172v-6.65a.2.2 0 0 0-.027-.11.3.3 0 0 0-.07-.085L7.983 2.554a.2.2 0 0 0-.142-.052.2.2 0 0 0-.142.052L3.266 5.88a.3.3 0 0 0-.071.086.2.2 0 0 0-.027.108v6.651q0 .105.068.172a.23.23 0 0 0 .172.068", fill: "#595959" })));
const HospitalIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default.createElement("path", { d: "M8 8q.55 0 .941-.392.393-.391.392-.941 0-.55-.392-.942A1.28 1.28 0 0 0 8 5.333q-.55 0-.942.392a1.28 1.28 0 0 0-.391.942q0 .55.391.941Q7.45 8 8 8m0 4.9q2.032-1.866 3.017-3.392Q12 7.983 12 6.8q0-1.817-1.158-2.975Q9.682 2.667 8 2.667T5.158 3.825Q4 4.983 4 6.8q0 1.184.983 2.708Q5.966 11.034 8 12.9m0 1.517a.8.8 0 0 1-.5-.183q-2.433-2.151-3.633-3.992T2.667 6.8q0-2.5 1.608-3.983Q5.883 1.332 8 1.333q2.116 0 3.725 1.484T13.333 6.8q0 1.6-1.2 3.442-1.2 1.841-3.633 3.991a.8.8 0 0 1-.5.184", fill: "#8C8C8C" })));
const SpecialtyIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
    React__default.createElement("path", { d: "M3.833.5a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667M10.5.5c-.92 0-1.667.746-1.667 1.667V5.5c0 .92.746 1.667 1.667 1.667h3.333c.921 0 1.667-.746 1.667-1.667V2.167C15.5 1.246 14.754.5 13.833.5zM3.833 8.833a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667m8.334 0a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667", fill: "#9AA2AC" })));

const SearchSpecialty = ({ state, isMobile, onSpecialtyClick, dispatch, isCompact = false, }) => {
    const { t, locale } = useTranslations();
    const inputSpecialtyWrapperRef = useRef(null);
    const searchInputRef = useRef(null);
    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
    const [searchValue, setSearchValue] = useState('');
    const [opened, { close, toggle }] = useDisclosure(false);
    useOutsideClick(inputSpecialtyWrapperRef, () => {
        close();
        setSearchValue('');
        dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
    });
    const specialtyData = useMemo(() => [
        {
            name: t('booking.searchBar.allSpecialties'),
            id: -1,
            thumbnail: '',
            total_doctor: 0,
            slug: slugs.SPECIALTIES,
        },
        ...state.allSpecialties,
    ], [state.allSpecialties, t, slugs.SPECIALTIES]);
    const filteredData = useMemo(() => {
        if (!searchValue.trim())
            return specialtyData;
        return specialtyData.filter((s) => s.name.toLowerCase().includes(searchValue.toLowerCase().trim()));
    }, [specialtyData, searchValue]);
    const selectedLabel = useMemo(() => {
        if (!state.selectedSpecialty)
            return '';
        return state.selectedSpecialty.name;
    }, [state.selectedSpecialty]);
    const handleSelect = useCallback((item) => {
        onSpecialtyClick({
            id: item.id,
            name: item.name,
            slug: item.slug,
            thumbnail: item.thumbnail || '',
            total_doctor: 0,
        });
        close();
        setSearchValue('');
    }, [onSpecialtyClick, close]);
    const handleToggle = useCallback(() => {
        toggle();
        if (opened) {
            setSearchValue('');
        }
    }, [toggle, opened]);
    return (React__default.createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef, className: isCompact ? 'compact' : '' },
        React__default.createElement(Box, { onClick: handleToggle, className: opened ? 'dropdown-trigger-open' : '', sx: {
                cursor: 'pointer',
                position: 'relative',
                width: isCompact ? (isMobile ? 96 : 160) : '100%',
                flexShrink: 0,
            } },
            React__default.createElement(Input, { readOnly: true, value: selectedLabel, placeholder: t('booking.searchPopup.specialties'), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }), styles: Object.assign({ input: {
                        cursor: 'pointer',
                        outline: 'none',
                        '&:focus': {
                            outline: 'none',
                        },
                        '&:not(.mantine-Textarea-input)': {
                            height: isCompact ? 40 : isMobile ? 40 : 46,
                            fontSize: isCompact ? rem(14) : isMobile ? rem(14) : rem(16),
                            paddingLeft: isCompact ? 12 : 16,
                            paddingRight: 30,
                            background: isCompact ? 'white' : 'transparent',
                            border: isCompact
                                ? `1px solid ${theme.colors.gray200}`
                                : 'none',
                            borderRadius: 8,
                            letterSpacing: '-0.2px',
                            color: theme.colors.gray800,
                            textOverflow: 'ellipsis',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                        },
                    }, rightSection: {
                        width: 30,
                        pointerEvents: 'none',
                    } }, (!isCompact && {
                    wrapper: {
                        position: 'relative',
                        '&:after': {
                            content: '""',
                            width: '1px',
                            height: '20px',
                            backgroundColor: theme.colors.neutral100,
                            position: 'absolute',
                            right: 0,
                            top: '50%',
                            transform: 'translateY(-50%)',
                        },
                    },
                })) })),
        opened && (React__default.createElement(StyleDropdownPanel, { className: isMobile ? 'mobile' : '' },
            React__default.createElement(Box, { sx: { padding: '12px 12px 8px' } },
                React__default.createElement(Input, { ref: searchInputRef, icon: React__default.createElement(Search, { size: 18, color: theme.colors.gray300 }), placeholder: t('booking.searchBar.placeholder.specialty'), value: searchValue, onChange: (e) => setSearchValue(e.target.value), size: "md", styles: {
                        input: {
                            height: 40,
                            fontSize: rem(15),
                            paddingLeft: 36,
                            '&::placeholder': {
                                color: theme.colors.gray400,
                            },
                        },
                        icon: {
                            width: 36,
                        },
                    } })),
            React__default.createElement(ScrollArea.Autosize, { mah: 300 }, filteredData.length === 0 ? (React__default.createElement(Box, { sx: {
                    padding: '12px 16px',
                    color: theme.colors.gray400,
                    fontSize: 14,
                } }, t('common.noResult'))) : (filteredData.map((specialty) => {
                var _a, _b;
                return (React__default.createElement(StyledSpecialtyItem, { key: specialty.id, tabIndex: 0, role: "option", "aria-selected": ((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) === specialty.id, className: ((_b = state.selectedSpecialty) === null || _b === void 0 ? void 0 : _b.id) === specialty.id
                        ? 'selected'
                        : '', onClick: () => handleSelect(specialty), onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            handleSelect(specialty);
                        }
                    } },
                    React__default.createElement("div", { className: "image-item" }, specialty.thumbnail ? (React__default.createElement("img", { src: specialty.thumbnail, alt: specialty.name })) : (React__default.createElement(SpecialtyIcon, null))),
                    React__default.createElement("span", { className: "item-label" }, specialty.name)));
            })))))));
};

const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }, ref) => {
    const { t } = useTranslations();
    const inputSearchWrapperRef = useRef(null);
    const internalInputRef = useRef(null);
    useImperativeHandle(ref, () => ({
        focus: () => {
            var _a;
            (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        },
    }));
    const gaAttributes = useMemo(() => {
        if (trackingAttributes) {
            return {
                'data-event-category': trackingAttributes.dataEventCategory,
                'data-event-action': trackingAttributes.dataEventAction,
                'data-event-label': trackingAttributes.dataEventLabel,
            };
        }
        else {
            return {};
        }
    }, [trackingAttributes]);
    const placeholderSearch = useMemo(() => {
        if (type === 'doctor')
            return t('booking.searchBar.placeholder.doctor');
        if (type === 'service')
            return t('booking.searchBar.placeholder.service');
        if (type === 'hospital')
            return t('booking.searchBar.placeholder.hospital');
        if (type === 'specialty')
            return t('booking.searchBar.placeholder.specialty');
        return '';
    }, [type, t]);
    const showSpecialtyInSearchBar = type !== 'specialty' &&
        type !== 'service' &&
        !hideSpecialtySelection &&
        !onlyShowSearchBox;
    const styleInputUnstyled = useMemo(() => ({
        input: {
            border: 'none',
            background: 'transparent',
            height: '100%',
            fontSize: rem(16),
            color: theme.colors.gray800,
            padding: '0',
            '&::placeholder': {
                color: theme.colors.gray400,
            },
            '&:focus': {
                outline: 'none',
                boxShadow: 'none',
            },
            [isMobile ? '@media (max-width: 767px)' : '']: isMobile
                ? {
                    fontSize: rem(16),
                }
                : {},
        },
        wrapper: {
            flex: 1,
        },
    }), [isMobile]);
    useOutsideClick(inputSearchWrapperRef, () => {
        !isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
    });
    const handleSearchInputChange = useCallback(function handleSearchInputChange(value) {
        dispatch({ type: ActionTypes.ChangeInputSearch, payload: value });
        if (typeof onSearch === 'function') {
            return;
        }
        if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] ||
            initalSearchValue ||
            value.trim().length === 0) {
            debouncedFetchSearchResults(value.trim(), state, type, clientSlug);
        }
    }, [
        dispatch,
        state,
        type,
        initalSearchValue,
        debouncedFetchSearchResults,
        clientSlug,
        onSearch,
    ]);
    const handleSpecialtyClick = useCallback(function handleSpecialtyClick(specialty) {
        var _a;
        dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
        onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
        !isMobile && ((_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
    }, [dispatch, onChangeSpecialty]);
    const inputOnKeyDown = useCallback((e) => {
        if (e.key === 'Enter') {
            e.stopPropagation();
            e.preventDefault();
            onEnterSearch && onEnterSearch();
        }
    }, [onEnterSearch]);
    return (React__default.createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef },
        React__default.createElement(StyleSearchBarContainer, null,
            showSpecialtyInSearchBar && (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick, isCompact: true })),
            React__default.createElement(StyleSearchIconWrapper, null,
                React__default.createElement(Search, null)),
            React__default.createElement(Input, Object.assign({ ref: internalInputRef, variant: "unstyled", size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputUnstyled, value: state.searchKeywords, name: "search-results", autoComplete: "off", onFocus: () => {
                    dispatch({ type: ActionTypes.FocusInputSearch });
                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
                }, onChange: (event) => {
                    handleSearchInputChange(event.target.value);
                }, onKeyDown: inputOnKeyDown }, gaAttributes))),
        !isMobile && type !== 'specialty' && (React__default.createElement(StyleResultWrapper, null,
            React__default.createElement(SearchResultContent, { type: type, state: state, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))));
});
SearchInputs.displayName = 'SearchInputs';

const ModalSearchResult = (_a) => {
    var { searchInputEle, closeModal, children } = _a, props = __rest(_a, ["searchInputEle", "closeModal", "children"]);
    const theme = useMantineTheme();
    return (React__default.createElement(Modal, Object.assign({}, props, { zIndex: 310, fullScreen: true, styles: {
            content: {
                borderRadius: 0,
                height: '100%',
                '.search-results__body': { padding: 0 },
                '.result-item': {
                    paddingLeft: 16,
                    paddingRight: 16,
                },
                '.noresult-block': {
                    padding: 16,
                },
                '.skeleton-result': {
                    padding: 16,
                },
            },
            header: { display: 'none' },
        } }),
        React__default.createElement(Stack, { spacing: 16, sx: { paddingTop: 16 } },
            React__default.createElement(Flex, { align: 'center', gap: 12 },
                React__default.createElement(ArrowLeft, { size: 28, onClick: closeModal, color: theme.fn.primaryColor() }),
                React__default.createElement(Box, { sx: { width: '100%' } }, searchInputEle)),
            children)));
};

const StyleSearchLocationWrapper = styled.div `
  position: relative;
  width: 240px;
  flex-shrink: 0;

  ${MediaQueries.mbDown} {
    width: 100%;
  }
`;
styled.div `
  position: absolute;
  top: calc(100% + 2px);
  width: 100%;
  border-radius: 4px;
  background: ${theme.colors.white};
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;

  ${MediaQueries.mbDown} {
    width: calc(100% + 64px);
    left: -32px;
  }
`;
const StyledLocationItem = styled.div `
  position: relative;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;

  & + li::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background-color: ${theme.colors.neutral100};
  }

  &:not([data-is-denied='true']):hover {
    background-color: ${theme.colors.neutral50};
  }

  &:last-child:hover {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  &:first-child:hover {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
  }

  &[data-is-denied='true'] {
    cursor: not-allowed;
  }
`;
const StyledPinIcon = styled(PinIcon) `
  width: 12px;
  height: 18px;
  flex: 0 0 12px;
`;

const CustomSelectItem = forwardRef((_a, ref) => {
    var { label, value } = _a, others = __rest(_a, ["label", "value"]);
    return (React__default.createElement("div", Object.assign({ ref: ref }, others),
        React__default.createElement(StyledLocationItem, { key: value, role: "button", tabIndex: 0, "aria-label": `Select ${label} as location`, className: "location-item" },
            React__default.createElement(StyledPinIcon, { color: theme.colors.neutral400 }),
            React__default.createElement(Text$1, { size: "md" }, label))));
});

const SearchLocation = ({ state, debouncedFetchCitiesByKeyword, selectedLocation, trackingAttributes, onLocationClick, dispatch, }) => {
    var _a;
    const { t, locale } = useTranslations();
    const inputLocationWrapperRef = useRef(null);
    const citiesData = useMemo(() => {
        var _a;
        return [
            {
                name: t('booking.searchBar.allLocations'),
                id: ID_OPTION_ALL_LOCATION,
                slug: (_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
            },
            ...state.cities,
        ];
    }, [state.cities, t, locale]);
    const gaAttributes = useMemo(() => {
        if (trackingAttributes) {
            return {
                'data-event-category': trackingAttributes.dataEventCategory,
                'data-event-action': trackingAttributes.dataEventAction,
                'data-event-label': trackingAttributes.dataEventLabel,
            };
        }
        return {};
    }, [trackingAttributes]);
    const handleSearchLocationInputChange = useCallback(function handleSearchLocationInputChange(value) {
        dispatch({ type: ActionTypes.ChangeInputLocation, payload: value });
        if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
            debouncedFetchCitiesByKeyword(value.trim());
        }
        else {
            debouncedFetchCitiesByKeyword.cancel();
            dispatch({ type: ActionTypes.DisplayInitialCities });
        }
    }, [debouncedFetchCitiesByKeyword, dispatch, state.locale]);
    useOutsideClick(inputLocationWrapperRef, () => {
        dispatch({ type: ActionTypes.ClickOutsideInputLocation });
    });
    const stateValue = (_a = selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.id) !== null && _a !== void 0 ? _a : null;
    const defaultValue = stateValue === null ? undefined : String(stateValue);
    return (React__default.createElement(StyleSearchLocationWrapper, { ref: inputLocationWrapperRef },
        React__default.createElement(Select, Object.assign({ key: defaultValue !== null && defaultValue !== void 0 ? defaultValue : 'no-selected-location', defaultValue: defaultValue, placeholder: t('booking.searchBar.allLocations'), searchable: true, onSearchChange: (value) => {
                handleSearchLocationInputChange(value);
            }, onFocus: () => {
                dispatch({ type: ActionTypes.DisplayInitialCities });
            }, onDropdownClose: () => {
                debouncedFetchCitiesByKeyword.cancel();
                dispatch({ type: ActionTypes.DisplayInitialCities });
            }, nothingFound: t('common.noResult'), maxDropdownHeight: 340, dropdownPosition: "bottom", icon: React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                React__default.createElement("path", { d: "M9.99908 10.8332C11.2264 10.8332 12.2213 9.83764 12.2213 8.61097C12.2213 7.3843 11.2264 6.38875 9.99908 6.38875C8.77174 6.38875 7.77686 7.3843 7.77686 8.61097C7.77686 9.83764 8.77174 10.8332 9.99908 10.8332Z", stroke: "#111111", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
                React__default.createElement("path", { d: "M9.99919 18.0554C11.7584 17.4999 16.6659 13.611 16.6659 8.61097C16.6659 4.93097 13.6811 1.94431 9.99919 1.94431C6.3173 1.94431 3.33252 4.93097 3.33252 8.61097C3.33252 13.611 8.23996 17.4999 9.99919 18.0554Z", stroke: "#111111", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }) }, gaAttributes, { styles: () => ({
                item: {
                    padding: 0,
                    '&[data-selected]': {
                        '&, &:hover': {
                            backgroundColor: '#F7F9FC',
                            color: 'inherit',
                        },
                        '.location-item': {
                            '&::after': {
                                content: checkMarkIconUrl,
                                top: '50%',
                                right: 19,
                                position: 'absolute',
                                transform: 'translateY(-50%)',
                            },
                        },
                    },
                    '&[data-hovered]': {
                        backgroundColor: 'transparent',
                    },
                },
                root: {
                    width: '100%',
                },
                wrapper: {
                    width: '100%',
                },
                input: {
                    '&:not(.mantine-Textarea-input)': {
                        height: 48,
                        fontSize: rem(15),
                        fontWeight: 400,
                        letterSpacing: '-0.3px',
                        color: theme.colors.gray1000,
                        paddingLeft: 44,
                        paddingRight: 40,
                        background: 'white',
                        border: `1px solid ${theme.colors.gray200}`,
                        borderRadius: 12,
                    },
                },
                icon: {
                    width: 44,
                    paddingLeft: 12,
                },
                rightSection: {
                    width: 40,
                    paddingRight: 12,
                },
                itemsWrapper: {
                    padding: 0,
                },
                dropdown: {
                    left: '0 !important',
                    border: 0,
                    marginTop: 4,
                    borderRadius: 12,
                    overflow: 'hidden',
                    boxShadow: '0px 0px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 10px 16px 0px rgba(0, 0, 0, 0.04)',
                    '& ::-webkit-scrollbar': {
                        width: '6px',
                        height: '6px',
                    },
                },
            }), itemComponent: CustomSelectItem, filter: () => true, onChange: (value) => {
                if (value == null)
                    return;
                const city = citiesData.find((i) => String(i.id) === value);
                if (!city)
                    return;
                onLocationClick(city);
                debouncedFetchCitiesByKeyword.cancel();
                dispatch({ type: ActionTypes.DisplayInitialCities });
                setTimeout(() => {
                    var _a, _b;
                    (_b = (_a = inputLocationWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.blur();
                }, 0);
            }, data: citiesData.map((city) => ({
                value: String(city.id),
                label: city.name,
                city,
            })) }))));
};

const StyleSpecialtiesWrapper = styled.div `
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 20px;
  ${MediaQueries.mbDown} {
    margin-top: 12px;
  }
`;
const StyleSpecialtyItem = styled.div `
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid ${theme.colors.neutral100};
  background: ${theme.colors.white};
  padding: 8px 12px 8px 8px;
  flex: 0 0 calc(33.3% - 13px);
  gap: 12px;
  cursor: pointer;

  &:hover {
    background: ${theme.colors.blue50};
  }

  ${MediaQueries.tdDown} {
    flex: 0 0 calc(50% - 10px);
  }

  ${MediaQueries.mbDown} {
    flex: 0 0 100%;
    border: none;
  }

  .image-item {
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;

    img {
      width: 100%;
      object-fit: cover;
    }
  }

  .infor {
    flex: 1;
    .title {
      color: ${theme.colors.gray800};
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }

    .description {
      color: ${theme.colors.gray600};
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
    }
  }
`;
const StyleDivider = styled(Divider) `
  margin: 24px 0 !important;
`;
const StyleShowMore = styled.div `
  display: flex;
  justify-content: center;
  margin-top: 24px;
  .show-more {
    border-radius: 4px;
    border: 1px solid ${theme.colors.neutral200};
    padding: 12px 16px;
    cursor: pointer;
    display: inline-block;
    color: ${theme.colors.gray800};
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;

    ${MediaQueries.mbDown} {
      width: 100%;
      text-align: center;
    }
  }
`;

const SearchResultSpecialties = ({ state, isMobile, specialties, isLoading, dispatch, }) => {
    const { t, locale } = useTranslations();
    const { selectedLocation } = state;
    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
    const handleOnClick = (specialtySlug) => {
        let url = '';
        if (specialtySlug === SLUG_VACIN_ID) {
            url = `/${selectedLocation.slug}/${slugs.HOSPITAL}/${CLIENT_KEY.GSK}/`;
            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
        }
        else {
            url = `/${selectedLocation.slug}/${slugs.DOCTOR}/${specialtySlug}`;
        }
        dispatch({ type: ActionTypes.NavigateTo, payload: url });
    };
    const handleShowMore = () => {
        const url = `/${slugs.SPECIALTIES}`;
        dispatch({ type: ActionTypes.NavigateTo, payload: url });
    };
    const showSeeMore = useMemo(() => {
        return (specialties.length >= 9 ||
            state.searchKeywords.trim().length <=
                SEARCH_KEYWORD_MIN_LENGTH[state.locale]);
    }, [state.searchKeywords, specialties]);
    return (React__default.createElement(React__default.Fragment, null,
        !isMobile && React__default.createElement(StyleDivider, { color: "#E4E8EC" }),
        React__default.createElement(StyleSpecialtiesWrapper, null,
            specialties.length > 0 && !isLoading && (React__default.createElement(React__default.Fragment, null, specialties.map((specialty, index) => {
                if (index >= 9) {
                    return React__default.createElement(React__default.Fragment, null);
                }
                return (React__default.createElement(StyleSpecialtyItem, { key: specialty.id, onClick: () => handleOnClick(specialty.slug) },
                    React__default.createElement("div", { className: "image-item" },
                        React__default.createElement("img", { src: specialty.thumbnail, alt: specialty.name })),
                    React__default.createElement("div", { className: "infor" },
                        React__default.createElement("div", { className: "title" }, specialty.name))));
            }))),
            specialties.length === 0 && !isLoading && (React__default.createElement(Text, { size: "sm", color: theme.colors.gray400 }, t('booking.searchBar.noResults'))),
            isLoading &&
                Array(6)
                    .fill(undefined)
                    .map((_, i) => (React__default.createElement(StyleSpecialtyItem, { key: 'loading' + i },
                    React__default.createElement("div", { className: "image-item" },
                        React__default.createElement(Skeleton, { height: 40, animate: true })),
                    React__default.createElement("div", { className: "infor" },
                        React__default.createElement("div", { className: "title" },
                            React__default.createElement(Skeleton, { height: 20, radius: "sm", animate: true }))))))),
        showSeeMore && (React__default.createElement(StyleShowMore, null,
            React__default.createElement("div", { className: "show-more", onClick: handleShowMore }, t('home.seeAll'))))));
};

const StyleSearchTagWrapper = styled.div `
  display: flex;
  gap: 5px;
  margin-top: 16px;
  flex-wrap: wrap;
`;
const StyleTagItem = styled.div `
  color: ${theme.colors.gray600};
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 4px 12px;
  background: ${theme.colors.white};
  border-radius: 32px;
  cursor: pointer;
  border: 1px solid ${theme.colors.white};
  margin-bottom: 5px;
  border-color: ${theme.colors.neutral100};
  background: #f7f9fc;

  &.view-all {
    border-radius: 32px;
    border-color: ${theme.colors.blue50};
    background: ${theme.colors.blue50};
    color: ${theme.colors.blue600};

    &:hover {
      border-color: ${theme.colors.blue50};
      background: ${theme.colors.blue50};
      color: ${theme.colors.blue600};
    }
  }

  &:hover {
    border-color: ${theme.colors.neutral100};
    background: #f7f9fc;
  }
`;
const StyleTagLabel = styled.div `
  color: ${theme.colors.gray600};
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 4px 0;
  background: ${theme.colors.white};
  border-radius: 32px;
  border: 1px solid ${theme.colors.white};
  margin-bottom: 5px;
  margin-right: 7px;
`;

const SearchTag = ({ state, type, typeInformation, dispatch }) => {
    const { t } = useTranslations();
    const { selectedLocation } = state;
    const typeSlug = useMemo(() => typeInformation[type].slug, [typeInformation, type]);
    const handleViewAll = () => {
        const url = `/${selectedLocation.slug}/${typeSlug}`;
        if (url) {
            dispatch({ type: ActionTypes.NavigateTo, payload: url });
        }
    };
    const handleClickKeyword = (keyword) => {
        if (keyword.url) {
            window.location.href = keyword.url;
        }
    };
    return (React__default.createElement(StyleSearchTagWrapper, null,
        React__default.createElement(StyleTagLabel, null, t('booking.searchBar.popularKey')),
        state.popularKeys.map((item) => {
            return (React__default.createElement(StyleTagItem, { key: item.id, onClick: () => handleClickKeyword(item) }, item.keyword));
        }),
        React__default.createElement(StyleTagItem, { className: "view-all", onClick: handleViewAll }, t('booking.searchBar.viewAll'))));
};

const StyledTabWrapper = styled.div `
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid ${theme.colors.neutral100};
`;
const StyleTabContainer = styled(Container) `
  padding: 0 16px;
`;

const TabSearch = ({ currentTab, hideTabBookingSearch = [], hideSpecialtyTab, isMobile, setCurrentTab, }) => {
    const { t } = useTranslations();
    const stylesTabs = useMemo(() => {
        return {
            root: {
                overflowY: isMobile ? 'hidden' : 'initial',
                overflowX: isMobile ? 'auto' : 'initial',
            },
            tabsList: {
                background: 'rgba(255, 255, 255, 0)',
                borderBottom: 'none',
                flexWrap: 'nowrap',
                '.mantine-Tabs-tab': {
                    '&:last-child': {
                        '&:after': {
                            display: 'none',
                        },
                    },
                },
            },
            tab: {
                padding: isMobile ? '12px 16px 12px 16px' : '15px 40px 15px 40px',
                borderTop: '2px solid transparent',
                borderBottom: 'none',
                margin: 0,
                borderRadius: 0,
                position: 'relative',
                width: 'auto',
                '&[data-active="true"]': {
                    borderColor: '#2d87f3',
                    backgroundColor: '#ffffff',
                    '&:after': {
                        display: 'none',
                    },
                    '&:before': {
                        content: '""',
                        width: '100%',
                        height: '1px',
                        position: 'absolute',
                        backgroundColor: '#ffffff',
                        bottom: '-1px',
                    },
                },
                '&:hover': {
                    borderColor: '#2d87f3',
                    backgroundColor: '#ffffff',
                    '&:before': {
                        content: '""',
                        width: '100%',
                        height: '1px',
                        position: 'absolute',
                        backgroundColor: '#ffffff',
                        bottom: '-1px',
                    },
                },
                '&:after': {
                    content: '""',
                    width: '1px',
                    height: '24px',
                    backgroundColor: '#E4E8EC',
                    position: 'absolute',
                    right: '-1px',
                },
            },
            tabLabel: {
                color: '#595959',
                fontSize: isMobile ? '14px' : '16px',
                fontWeight: 600,
                lineHeight: isMobile ? '22px' : '24px',
            },
        };
    }, [isMobile]);
    const tabConfig = useMemo(() => [
        {
            value: 'hospital',
            label: t('booking.searchPopup.hospitals'),
        },
        {
            value: 'doctor',
            label: t('booking.searchPopup.doctors'),
        },
        {
            value: 'service',
            label: t('booking.searchPopup.services'),
        },
        ...(!hideSpecialtyTab
            ? [
                {
                    value: 'specialty',
                    label: t('booking.searchPopup.specialties'),
                },
            ]
            : []),
    ], [hideSpecialtyTab]);
    const activeTabs = useMemo(() => {
        return (tabConfig.filter((item) => !hideTabBookingSearch.includes(item.value)) ||
            []);
    }, [hideTabBookingSearch, tabConfig]);
    return (React__default.createElement(StyledTabWrapper, { className: "booking-search-tab" },
        React__default.createElement(StyleTabContainer, null,
            React__default.createElement(Tabs, { value: currentTab, onTabChange: (tab) => {
                    setCurrentTab(tab);
                }, styles: stylesTabs },
                React__default.createElement(Tabs.List, null, activeTabs.map((tab) => {
                    return (React__default.createElement(Tabs.Tab, { value: tab.value, key: tab.value }, tab.label));
                }))))));
};

var TypePopularKeySearch;
(function (TypePopularKeySearch) {
    TypePopularKeySearch["doctor"] = "doctor";
    TypePopularKeySearch["service"] = "hospital_service";
    TypePopularKeySearch["hospital"] = "hospital_branch";
})(TypePopularKeySearch || (TypePopularKeySearch = {}));

const ignoreCacarSpecialty = (specialties) => {
    return specialties.filter((item) => {
        if (typeof item === 'string') {
            return item !== 'cacar-api';
        }
        return (item === null || item === void 0 ? void 0 : item.id) !== 232;
    });
};
function useSearchBarApi({ dispatch, careApiDomain, locale = 'vi-VN', client = '', }) {
    const fetchCitiesApi = useCallback(function fetchCitiesApi(path, params = {}) {
        const url = `${careApiDomain}${path}`;
        dispatch({ type: ActionTypes.FetchCitiesStart });
        return fetch(getApiPath(url, params, locale), { method: 'GET' })
            .then((res) => res.json())
            .then((data) => {
            if (data._status !== 1 || !data._data) {
                console.log('error loading cities', data);
                return Promise.reject(data);
            }
            return data === null || data === void 0 ? void 0 : data._data;
        })
            .finally(() => dispatch({ type: ActionTypes.FetchCitiesFinish }));
    }, [locale]);
    const fetchCitiesByLocation = useCallback(function fetchCitiesByLocation({ coordinates }) {
        let params = {};
        const moreParams = {};
        if (coordinates) {
            params = {
                lat: coordinates.lat,
                lng: coordinates.lng,
            };
        }
        if (locale === 'ms-MY') {
            moreParams.noPaging = 1;
        }
        const requests = [
            fetchCitiesApi(PATHS.GET_CITY_BY_IP, Object.assign(Object.assign(Object.assign({}, params), moreParams), { hospitalActive: 1, client: CLIENT_KEY.MSD === client ? '' : client })),
        ];
        if (locale === 'zh-TW') {
            requests.push(fetchCitiesApi(PATHS.GET_CITIES_LIST, {
                noPaging: 1,
                hospitalActive: 1,
                client: CLIENT_KEY.MSD === client ? '' : client,
            }));
        }
        else {
            requests.push(fetchCitiesApi(PATHS.GET_CITIES_LIST, {
                noPaging: 1,
                hospitalActive: 1,
            }));
        }
        return Promise.all(requests)
            .then(([data1, data2]) => {
            const data = Object.assign({}, data1);
            if (data2) {
                const citiesIds = data.cities.map((c) => c.id);
                data.cities = data.cities.concat(data2.cities.filter((c) => !citiesIds.includes(c.id)));
            }
            dispatch({
                type: ActionTypes.FetchCitiesByGeoIpComplete,
                payload: data,
            });
        })
            .catch((err) => console.error('error loading cities by location', err));
    }, [locale, careApiDomain, dispatch]);
    const fetchCitiesByKeyword = useCallback(function fetchCitiesByKeyword(keyword) {
        return fetchCitiesApi(PATHS.GET_CITIES_LIST, {
            keyword,
            client,
        })
            .then((data) => {
            dispatch({
                type: ActionTypes.FetchCitiesByKeywordComplete,
                payload: data.cities,
            });
        })
            .catch((err) => console.error('error loading cities by keyword', err));
    }, [locale, careApiDomain, dispatch]);
    const fetchSearchResults = useCallback(function fetchSearchResults(searchKeywords, state, searchType, clientSlug, cacheResult) {
        const url = searchType === 'specialty'
            ? `${careApiDomain}${PATHS.GET_SEARCH_SPECIALTY}`
            : `${careApiDomain}${PATHS.GET_SEARCH_V2}`;
        dispatch({ type: ActionTypes.FetchSearchResultsStart });
        const { selectedLocation, geoLocationCoordinates, selectedSpecialty } = state;
        let cityId = '';
        if (!selectedLocation) {
            dispatch({ type: ActionTypes.FetchSearchResultsFinish });
            return;
        }
        if (selectedLocation.id === ID_OPTION_ALL_LOCATION) {
            cityId = '';
        }
        else {
            cityId = selectedLocation.id;
        }
        const lat = (geoLocationCoordinates === null || geoLocationCoordinates === void 0 ? void 0 : geoLocationCoordinates.lat) || '';
        const lng = (geoLocationCoordinates === null || geoLocationCoordinates === void 0 ? void 0 : geoLocationCoordinates.lng) || '';
        const specialty_id = (selectedSpecialty === null || selectedSpecialty === void 0 ? void 0 : selectedSpecialty.id) > 0 ? selectedSpecialty === null || selectedSpecialty === void 0 ? void 0 : selectedSpecialty.id : '';
        const keyword = searchKeywords.trim().length > SEARCH_KEYWORD_MIN_LENGTH[locale]
            ? searchKeywords.trim()
            : '';
        return fetch(getApiPath(url, Object.assign({ domain: careApiDomain, searchType: searchType || 'global', keyword: keyword, city: cityId === ID_OPTION_CURRENT_LOCATION ? '' : cityId, lat,
            lng,
            specialty_id, client_slug: CLIENT_KEY.MSD === clientSlug ? '' : clientSlug, msd: CLIENT_KEY.MSD === client ? 1 : '' }, (searchType === 'doctor' && {
            skipBooking: 1,
        })), locale), {
            method: 'GET',
            headers: {
                accept: 'version=2.0.0.0',
            },
        })
            .then((res) => res.json())
            .then((data) => {
            if (data._status !== 1 || !data._data) {
                return Promise.reject(data);
            }
            return data === null || data === void 0 ? void 0 : data._data;
        })
            .then((results) => {
            let searchesResult = [];
            if (searchType !== 'specialty') {
                if (searchType === 'doctor') {
                    searchesResult = results.searches.map((item) => {
                        return Object.assign(Object.assign({}, item), { specialties: ignoreCacarSpecialty((item === null || item === void 0 ? void 0 : item.specialties) || []) });
                    });
                }
                else {
                    searchesResult = results.searches;
                }
            }
            if (searchType === 'specialty') {
                if (keyword) {
                    searchesResult = ignoreCacarSpecialty((results === null || results === void 0 ? void 0 : results.specialties) || []);
                }
                else {
                    searchesResult = ignoreCacarSpecialty((results === null || results === void 0 ? void 0 : results.default) || []);
                }
            }
            dispatch({
                type: ActionTypes.FetchSearchResultsComplete,
                payload: {
                    key: searchType,
                    searches: searchesResult || [],
                },
            });
            if (cacheResult) {
                dispatch({
                    type: ActionTypes.UpdateInitialSearchResults,
                    payload: {
                        key: searchType,
                        searches: searchesResult || [],
                    },
                });
            }
        })
            .catch((error) => {
            console.log('error loading search results', { url, error });
        })
            .finally(() => dispatch({ type: ActionTypes.FetchSearchResultsFinish }));
    }, [locale, careApiDomain, dispatch]);
    const fetchAllSpecialties = useCallback(function fetchSearchSpecialties() {
        const url = `${careApiDomain}${PATHS.GET_SEARCH_SPECIALTY}`;
        return fetch(getApiPath(url, {
            domain: careApiDomain,
            searchType: '',
            msd: CLIENT_KEY.MSD === client ? 1 : '',
        }, locale), {
            method: 'GET',
            headers: {
                accept: 'version=2.0.0.0',
            },
        })
            .then((res) => res.json())
            .then((data) => {
            if (data._status !== 1 || !data._data) {
                return Promise.reject(data);
            }
            return data === null || data === void 0 ? void 0 : data._data;
        })
            .then((results) => {
            dispatch({
                type: ActionTypes.FetchAllSpecialties,
                payload: ignoreCacarSpecialty(results.specialties || []),
            });
        })
            .catch((error) => {
            console.log('error loading search results', { url, error });
        });
    }, [locale, careApiDomain, dispatch]);
    const fetchPopularKeys = useCallback(function fetchPopularKeys(searchType) {
        const url = `${careApiDomain}${PATHS.GET_SEARCH_POPULAR_KEY}`;
        return fetch(getApiPath(url, {
            domain: careApiDomain,
            searchType: TypePopularKeySearch[searchType],
            sort_by: 'display_order',
            sort_order: 'asc',
        }, locale))
            .then((res) => res.json())
            .then((data) => {
            if (data._status !== 1 || !data._data) {
                return Promise.reject(data);
            }
            return data === null || data === void 0 ? void 0 : data._data;
        })
            .then((results) => {
            dispatch({
                type: ActionTypes.FetchPopularKeys,
                payload: results.popular_searches || [],
            });
        })
            .catch((error) => {
            console.log('error loading search results', { url, error });
        });
    }, [locale, careApiDomain, dispatch]);
    return {
        fetchCitiesByLocation,
        fetchCitiesByKeyword,
        fetchSearchResults,
        fetchAllSpecialties,
        fetchPopularKeys,
    };
}

const BookingSearchBarV3 = ({ isMobile, careApiDomain, geoLocationPermission: geoLocationPermissionFromProps, geoLocationCoordinates: geoLocationCoordinatesFromProps, initialSelectedCity: initialSelectedCityFromProps, initialSearchValue = '', initTypeSearch = 'hospital', initSpecialty, careFrontDomain = '/care', isDebug = false, 
// askForGeolocationPermission = false,
gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inputSearchPlaceholder = '', hideTabBookingSearch = [], hideSpecialtySelection = false, hideSpecialtyTab = false, hidePopularSearchKeys = false, clientSlug = '', 
// isOptionAllLocation = false,
// hideResults = [],
// isNavResultItem = true,
triggerSearchWhenChangeFilter, routerPush, onGeoLocationPermissionChange, 
// onSearch,
onChangeLocation, }) => {
    var _a;
    const { locale, t } = useTranslations();
    const wrapperRef = useRef(null);
    const searchInputDesktopRef = useRef(null);
    const searchInputMobileRef = useRef(null);
    const inputSearchSpecialtyWrapperRef = useRef(null);
    const [currentTab, setCurrentTab] = useState(initTypeSearch);
    const { geoLocationPermission: geoLocationPermissionFromHook, geoLocationCoordinates: geoLocationCoordinatesFromHook, } = useGeolocation();
    const [state, dispatch] = useReducer(reducer, initialState, (s) => (Object.assign(Object.assign({}, s), { isDebug,
        isMobile, geoLocationPermission: geoLocationPermissionFromProps ||
            geoLocationPermissionFromHook ||
            'unset', geoLocationCoordinates: geoLocationCoordinatesFromProps ||
            geoLocationCoordinatesFromHook ||
            null, searchKeywords: initialSearchValue, initialSelectedCity: initialSelectedCityFromProps || null, selectedLocation: initialSelectedCityFromProps || s.selectedLocation || null, searchLocationKeywords: (initialSelectedCityFromProps === null || initialSelectedCityFromProps === void 0 ? void 0 : initialSelectedCityFromProps.name) || s.searchLocationKeywords, autoCompleteDisabled,
        inputSearchPlaceholder,
        locale })));
    const { navigateTo, focusedSpecialty, 
    // isLoadingCities,
    // cities,
    searchKeywords, geoLocationPermission, selectedLocation, 
    // selectedSpecialty,
    initialSelectedCity, 
    // defaultCity,
    searchResults, isLoadingSearchResults,
    // isMobileModalOpened,
    // inputSearchPlaceholder,
    // allSpecialties,
     } = state;
    const { fetchCitiesByLocation, fetchCitiesByKeyword, fetchSearchResults, fetchAllSpecialties, fetchPopularKeys, } = useSearchBarApi({
        dispatch,
        locale,
        careApiDomain,
        client: clientSlug,
    });
    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
    const [opened, { close, open }] = useDisclosure(false);
    const typeInformation = useMemo(() => {
        return Object.assign({ doctor: {
                name: t('booking.searchPopup.doctors'),
                icon: React__default.createElement(DoctorIcon, null),
                slug: slugs.DOCTOR,
            }, service: {
                name: t('booking.searchPopup.services'),
                icon: React__default.createElement(ServiceIcon, null),
                slug: slugs.SERVICE,
            }, hospital: {
                name: t('booking.searchPopup.hospitals'),
                icon: React__default.createElement(HospitalIcon, null),
                slug: slugs.HOSPITAL,
            } }, (!hideSpecialtyTab && {
            specialty: {
                name: t('booking.searchPopup.specialties'),
                icon: React__default.createElement(SpecialtyIcon, null),
                slug: slugs.SPECIALTIES,
            },
        }));
    }, [currentTab]);
    const debouncedFetchCitiesByKeyword = useMemo(() => debounce(fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
    const debouncedFetchSearchResults = useMemo(() => debounce(fetchSearchResults, 400), [fetchSearchResults]);
    // function focusSearchInput() {
    //   if (wrapperRef.current) {
    //     wrapperRef.current
    //       .querySelector<HTMLInputElement>('input[name="search-results"]')
    //       ?.focus()
    //   }
    // }
    const onClickSearchByKeyword = useCallback(function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
        var _a;
        close();
        let url = '';
        const { slug: typeSlug } = typeInformation[currentTab];
        let moreParams = '';
        const slugClientUrl = MAPPING_CLIENT_WITH_SLUG[locale][clientSlug];
        const selectedSpecialtyId = specialtyId || ((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) || -1;
        const selectedLocationSlug = locationSlug || (selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.slug) || '';
        if ((currentTab === 'doctor' || currentTab === 'hospital') &&
            selectedSpecialtyId > 0) {
            moreParams = `&specialtyId=${selectedSpecialtyId}`;
        }
        if (currentTab === 'specialty') {
            url = `/${typeSlug}`;
        }
        else {
            url = `/${selectedLocationSlug}/${typeSlug}`;
        }
        if (slugClientUrl) {
            url += `/${slugClientUrl}`;
        }
        url += `?q=${searchKeywords}${moreParams}`;
        if (url) {
            dispatch({ type: ActionTypes.NavigateTo, payload: url });
        }
    }, [
        clientSlug,
        close,
        currentTab,
        dispatch,
        locale,
        searchKeywords,
        selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.slug,
        (_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id,
        typeInformation,
    ]);
    const handleLocationClick = useCallback(function handleLocationClick(city) {
        triggerSearchWhenChangeFilter &&
            onClickSearchByKeyword({ locationSlug: city.slug });
        dispatch({ type: ActionTypes.SelectLocation, payload: city });
        if (onChangeLocation) {
            onChangeLocation(city);
        }
    }, [
        dispatch,
        isMobile,
        onChangeLocation,
        onClickSearchByKeyword,
        triggerSearchWhenChangeFilter,
    ]);
    useOutsideClick(inputSearchSpecialtyWrapperRef, () => {
        !isMobile &&
            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
    });
    useEffect(() => {
        var _a;
        if (geoLocationPermission !== 'denied' && !initialSelectedCity) {
            dispatch({
                type: ActionTypes.SelectLocation,
                payload: {
                    name: t('booking.searchBar.allLocations'),
                    id: ID_OPTION_ALL_LOCATION,
                    slug: (_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
                },
            });
        }
        if (onGeoLocationPermissionChange) {
            onGeoLocationPermissionChange(geoLocationPermission, state.geoLocationCoordinates);
        }
        if (isMobile && geoLocationPermission === 'granted' && selectedLocation) {
            dispatch({ type: ActionTypes.FocusInputSearch });
        }
        fetchCitiesByLocation({ coordinates: state.geoLocationCoordinates });
    }, [geoLocationPermission]);
    useEffect(() => {
        var _a;
        const defaultSpecialty = initSpecialty
            ? initSpecialty
            : {
                name: t('booking.searchBar.allSpecialties'),
                id: -1,
                thumbnail: '',
                total_doctor: 0,
                slug: slugs.SPECIALTIES,
            };
        if (initSpecialty) {
            if (((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) !== initSpecialty.id) {
                dispatch({
                    type: ActionTypes.SelectSpecialty,
                    payload: initSpecialty,
                });
            }
            return;
        }
        if (!state.selectedSpecialty ||
            state.selectedSpecialty.id !== defaultSpecialty.id) {
            dispatch({
                type: ActionTypes.SelectSpecialty,
                payload: defaultSpecialty,
            });
        }
    }, [initSpecialty, slugs.SPECIALTIES, t]);
    useEffect(() => {
        fetchAllSpecialties();
    }, []);
    useEffect(() => {
        fetchPopularKeys(currentTab);
    }, [currentTab]);
    useEffect(() => {
        if (navigateTo) {
            if (routerPush) {
                routerPush(navigateTo);
            }
            else {
                window.location.href = `${careFrontDomain}${navigateTo}`;
            }
        }
    }, [navigateTo]);
    useEffect(() => {
        fetchSearchResults(state.searchKeywords, state, currentTab, clientSlug, true);
    }, [currentTab]);
    useEffect(() => {
        if (opened && isMobile) {
            const timer = setTimeout(() => {
                var _a;
                (_a = searchInputMobileRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            }, 150);
            return () => clearTimeout(timer);
        }
    }, [opened, isMobile]);
    const searchInputsProps = {
        type: currentTab,
        isMobile: isMobile,
        state: state,
        dispatch: dispatch,
        debouncedFetchSearchResults: debouncedFetchSearchResults,
        initalSearchValue: initialSearchValue,
        // focusSearchInput: focusSearchInput,
        onEnterSearch: onClickSearchByKeyword,
        typeInformation: typeInformation,
        trackingAttributes: gaTrackingSearchBar,
        isLoading: isLoadingSearchResults,
        hideSpecialtySelection: hideSpecialtySelection || hideSpecialtyTab,
        clientSlug: clientSlug,
        triggerSearchWhenChangeFilter,
        onChangeSpecialty: (specialty) => triggerSearchWhenChangeFilter &&
            onClickSearchByKeyword({ specialtyId: specialty.id }),
    };
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(StyledSearchBarWrapper, { ref: wrapperRef },
            React__default.createElement(TabSearch, { currentTab: currentTab, setCurrentTab: setCurrentTab, isMobile: isMobile, hideTabBookingSearch: hideTabBookingSearch, hideSpecialtyTab: hideSpecialtyTab }),
            React__default.createElement(StyleWrapperContainer, { className: "booking-search-container" },
                React__default.createElement(StyleSearchInputContainer, null,
                    React__default.createElement(StyleSearchContent, { className: "booking-search-content" },
                        React__default.createElement("div", { ref: inputSearchSpecialtyWrapperRef },
                            React__default.createElement(Flex, { gap: "12px", align: "center", className: "flex-search-input" },
                                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { ref: searchInputDesktopRef, onFocusInput: () => isMobile && open() })),
                                currentTab !== 'specialty' && (React__default.createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
                                !isMobile && (React__default.createElement(Button, { size: "lg", variant: "primary", onClick: () => onClickSearchByKeyword(), styles: {
                                        root: {
                                            height: '48px',
                                            minWidth: '120px',
                                            borderRadius: '12px',
                                        },
                                    } }, t('booking.searchBar.searchButton')))),
                            !hidePopularSearchKeys &&
                                currentTab !== 'specialty' &&
                                state.popularKeys.length > 0 && (React__default.createElement(SearchTag, { type: currentTab, state: state, typeInformation: typeInformation, dispatch: dispatch })),
                            currentTab === 'specialty' &&
                                focusedSpecialty === 'search' && (React__default.createElement(SearchResultSpecialties, { state: state, isMobile: isMobile, dispatch: dispatch, specialties: (searchResults === null || searchResults === void 0 ? void 0 : searchResults.specialty) || [], isLoading: isLoadingSearchResults }))))))),
        isMobile && (React__default.createElement(ModalSearchResult, { keepMounted: true, opened: opened, onClose: close, closeModal: close, searchInputEle: React__default.createElement(Flex, { align: 'center', gap: 8 },
                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { onlyShowSearchBox: true, ref: searchInputMobileRef })),
                React__default.createElement(Button, { variant: "primary", leftIcon: React__default.createElement(Search, { size: 20, color: '#fff' }), onClick: () => onClickSearchByKeyword(), styles: {
                        root: {
                            borderRadius: '12px',
                        },
                    } })) },
            React__default.createElement(Box, { sx: {
                    marginLeft: -16,
                    marginRight: -16,
                } },
                React__default.createElement(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug }))))));
};

const StyledTextDivider = styled.div `
  background-color: var(--neutral50);
  padding: 12px 0;
  box-shadow: inset 0px 1px 0px #e4e8ec;

  > * {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-content: center;

    p {
      font-weight: 600;
    }
  }

  .icon-wrapper {
    display: flex;
    align-items: center;
  }
`;
const TextDivider = ({ children, icon, className, style }) => (React__default.createElement(StyledTextDivider, { style: style, className: className },
    React__default.createElement(Container, null,
        React__default.createElement("div", { className: "icon-wrapper" }, icon),
        React__default.createElement(Text, { size: "c1", color: "var(--neutral800)" }, children))));

export { BookingSearchBarV3 as B, TextDivider as T };
