'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var core$1 = require('@hhgtech/icons/core');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var utils$1 = require('./utils-f5279ce3.js');
var useOutsideClick = require('./useOutsideClick-20d5ca9e.js');
var index$1 = require('./index-3643ff1b.js');
var debounce = require('lodash/debounce');
var constants = require('./constants-3fbd741a.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-b92a8b1c.js');
var index = require('./index-07c3d435.js');
var index$2 = require('./index-a31ed3e1.js');
var ChevronDown = require('./ChevronDown-8067b030.js');
var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var arrow = require('@hhgtech/icons/arrow');
var index$3 = require('./index-16480bf7.js');
var paths = require('./paths-b2d1698d.js');
var index$4 = require('./index-3d563586.js');
require('./index-6ce6e395.js');
require('date-fns/locale');
require('./index-da3b86cd.js');
require('./Locale-fbe01177.js');
require('./constantsSite.js');
require('./constantsDomainLocales.js');
require('./constantsRiskScreener.js');
require('./constantsIsProduction.js');
require('./miscCookieHelper.js');
require('react-loading-skeleton');
require('string-format');
require('./translationsContext-78113889.js');
require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
require('./shared-60ad3e5a.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledSearchBarWrapper = styled__default["default"].div ``;
const StyleWrapperContainer = styled__default["default"].div `
  background-color: ${miscTheme.theme.colors.neutral50};
  padding-bottom: 1px;
  ${utils.MediaQueries.mbDown} {
    padding: 0 16px 10px;
  }
`;
const StyleSearchInputContainer = styled__default["default"](index.Container) `
  padding: 0 16px;

  ${utils.MediaQueries.mbDown} {
    padding: 0;
  }
`;
const StyleSearchContent = styled__default["default"].div `
  padding: 24px 56px;
  border-radius: 16px;
  background-color: ${miscTheme.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);

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

  .flex-search-input {
    flex-direction: row;
    ${utils.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["FetchCitiesByDefaultComplete"] = "fetch cities by default 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('bookingSearchBar', { 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) === constants.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) === constants.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.FetchCitiesByDefaultComplete: {
            return Object.assign(Object.assign({}, state), { defaultCity: null, initialCities: action.payload, cities: action.payload });
        }
        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__default["default"].div `
  flex: 1;
  position: relative;

  ${utils.MediaQueries.mbDown} {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
`;
const StyleResultWrapper = styled__default["default"].div `
  position: absolute;
  top: calc(100% + 2px);
  width: 100%;
  border-radius: 4px;
  background: ${miscTheme.theme.colors.white};
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;

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

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

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

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

  ${utils.MediaQueries.mbUp} {
    &:hover {
      background-color: ${miscTheme.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 ${miscTheme.theme.colors.neutral100};
    .title {
      color: ${miscTheme.theme.colors.gray800};
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
    }
    .description {
      overflow: hidden;
      color: ${miscTheme.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__default["default"].div `
  padding: 0 16px 16px;

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

const SearchResult = ({ state, type, results, 
// location,
isLoading, typeInformation, 
// clientSlug = '',
dispatch, }) => {
    const { t } = index$1.useTranslations();
    const { selectedLocation } = state;
    const typeSlug = React.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["default"].createElement(StyledSearchResultWrapper, null,
        React__default["default"].createElement(StyleResultBody, { className: "search-results__body" },
            isLoading && (React__default["default"].createElement("div", { className: "skeleton-result" }, Array(3)
                .fill(undefined)
                .map((_, i) => (React__default["default"].createElement(StyleResultItem, { key: type + 'loading' + i, className: i === 2 ? 'last-item' : '' },
                React__default["default"].createElement("div", { className: "image-item" },
                    React__default["default"].createElement(core.Skeleton, { height: 48, circle: true, mb: "xl", animate: true })),
                React__default["default"].createElement("div", { className: "infor" },
                    React__default["default"].createElement("div", { className: "title" },
                        React__default["default"].createElement(core.Skeleton, { height: 8, mt: 10, radius: "xl", animate: true })),
                    React__default["default"].createElement("div", { className: "description" },
                        React__default["default"].createElement("div", { className: "sub-description" },
                            React__default["default"].createElement(core.Skeleton, { height: 8, mt: 10, radius: "xl", width: "80%", animate: true }))))))))),
            !isLoading && results && results.length > 0 && (React__default["default"].createElement(React__default["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["default"].createElement(React__default["default"].Fragment, null);
                }
                return (React__default["default"].createElement(StyleResultItem, { key: item.id, className: core.clsx(isLastItem ? 'last-item' : '', 'result-item'), onClick: () => handleOnClick(item) },
                    React__default["default"].createElement("div", { className: "image-item" },
                        React__default["default"].createElement("img", { src: item.logo || item.avatar, alt: item.name })),
                    React__default["default"].createElement("div", { className: "infor" },
                        React__default["default"].createElement("div", { className: "title" }, item.name),
                        React__default["default"].createElement("div", { className: "description" },
                            typeInformation[type].icon,
                            React__default["default"].createElement("div", { className: "sub-description" }, subDescription)))));
            }))),
            !isLoading && (results === null || results === void 0 ? void 0 : results.length) === 0 && (React__default["default"].createElement(index$2.Text, { size: "sm", color: miscTheme.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["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__default["default"].div `
  position: relative;

  ${utils.MediaQueries.mbDown} {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
`;
styled__default["default"].div `
  position: absolute;
  top: calc(100% + 2px);
  width: calc(100% + 100px);
  border-radius: 4px;
  background: ${miscTheme.theme.colors.white};
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 300px;
  overflow: auto;

  ${utils.MediaQueries.mbDown} {
    width: calc(100% + 64px);
    left: -32px;
  }
`;
const StyledSpecialtyItem = styled__default["default"].li `
  position: relative;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;

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

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

    svg {
      width: 40px;
    }
  }

  ${({ isSelected }) => isSelected &&
    `
        &::after {
            content: ${utils$1.checkMarkIconUrl};
            top: 50%;
            right: 18px;
            position: absolute;
            transform: translateY(-50%);
        }
    `}

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

  &:not([data-is-denied='true']):hover {
    background-color: ${miscTheme.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 DoctorIcon = () => (React__default["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
    React__default["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 CustomSelectItem$1 = React.forwardRef((_a, ref) => {
    var { label, value, specialty } = _a, others = tslib_es6.__rest(_a, ["label", "value", "specialty"]);
    return (React__default["default"].createElement("div", Object.assign({ ref: ref }, others),
        React__default["default"].createElement(StyledSpecialtyItem, { key: value, 
            // onClick={(evt) => {
            //   evt.nativeEvent.stopImmediatePropagation()
            //   if (onSpecialtyClick) {
            //     onSpecialtyClick({
            //       ...specialty,
            //       total_doctor: 0,
            //     })
            //   }
            // }}
            role: "button", tabIndex: 0, "aria-label": `Select ${label} as location` },
            React__default["default"].createElement("div", { className: "image-item" }, specialty.thumbnail ? (React__default["default"].createElement("img", { src: specialty.thumbnail, alt: label })) : (React__default["default"].createElement(SpecialtyIcon, null))),
            React__default["default"].createElement(core.Text, { size: "md" }, label))));
});

const SearchSpecialty = ({ state, 
// debouncedFetchSearchResults,
onSpecialtyClick, dispatch, }) => {
    const { t, locale } = index$1.useTranslations();
    const inputSpecialtyWrapperRef = React.useRef(null);
    const slugs = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
    // const styleSpecialties = useMemo(() => {
    //   return {
    //     wrapper: {
    //       '&:after': {
    //         content: '""',
    //         width: '1px',
    //         height: '20px',
    //         backgroundColor: '#E4E8EC',
    //         position: 'absolute',
    //         right: 0,
    //         top: '13px',
    //       },
    //     },
    //     input: {
    //       border: isMobile ? 'border: 1px solid #d9d9d9' : 'none',
    //       height: isMobile ? '40px' : '46px !important',
    //       paddingRight: '30px',
    //       '&:focus': {
    //         boxShadow: isMobile ? 'box-shadow: 0px 0px 0px 2px #91caff' : 'none',
    //       },
    //     },
    //     rightSection: {
    //       width: '30px',
    //       svg: {
    //         fontSize: '20px',
    //       },
    //     },
    //   } as any
    // }, [isMobile])
    // const handleSearchSpecialtyInputChange = useCallback(
    //   function handleSearchSpecialtyInputChange(value: string) {
    //     // dispatch({ type: ActionTypes.ChangeInputLocation, payload: value })
    //     // if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
    //     //   debouncedFetchSearchResults(value.trim())
    //     // } else {
    //     //   debouncedFetchSearchResults.cancel()
    //     //   dispatch({ type: ActionTypes.DisplayInitialCities })
    //     // }
    //     console.log(value)
    //   },
    //   [debouncedFetchSearchResults, dispatch],
    // )
    useOutsideClick.useOutsideClick(inputSpecialtyWrapperRef, () => {
        dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
    });
    const specialtyData = [
        {
            name: t('booking.searchBar.allSpecialties'),
            id: -1,
            thumbnail: '',
            total_doctor: 0,
            slug: slugs.SPECIALTIES,
        },
        ...state.allSpecialties,
    ];
    const selectValue = state.selectedSpecialty && typeof state.selectedSpecialty.id === 'number'
        ? String(state.selectedSpecialty.id)
        : null;
    return (React__default["default"].createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef },
        React__default["default"].createElement(core.Select, { value: selectValue, placeholder: t('booking.searchPopup.specialties'), searchable: true, nothingFound: t('common.noResult'), maxDropdownHeight: 340, dropdownPosition: "bottom", data: specialtyData.map((specialty) => ({
                value: String(specialty.id),
                label: specialty.name,
                specialty,
            })), rightSection: React__default["default"].createElement(ChevronDown.ChevronDown, { style: { width: 20, height: 20 } }), styles: (theme) => ({
                dropdown: {
                    left: '0 !important',
                    border: 0,
                    marginTop: -7,
                    borderRadius: 0,
                    '& [data-mantine-scrollbar]': {
                        '&[data-orientation="vertical"]': {
                            width: '6px',
                        },
                    },
                    [theme.fn.largerThan('sm')]: {
                        minWidth: 264,
                        width: `264px !important`,
                    },
                },
                item: {
                    padding: 0,
                    '&[data-selected]': {
                        '&, &:hover': {
                            backgroundColor: 'transparent',
                            color: 'inherit',
                        },
                    },
                    '&[data-hovered]': {
                        backgroundColor: 'transparent',
                    },
                },
                input: {
                    '&:not(.mantine-Textarea-input)': {
                        height: 40,
                        fontSize: core.rem(14),
                        paddingLeft: 14,
                        paddingRight: 14,
                        [theme.fn.largerThan('sm')]: {
                            height: 46,
                            fontSize: core.rem(16),
                            paddingLeft: 16,
                            paddingRight: 16,
                            borderColor: 'transparent',
                        },
                        '&:focus, &:focus-within': {
                            outline: 'none',
                            boxShadow: 'none',
                        },
                    },
                },
                itemsWrapper: {
                    padding: 0,
                },
                wrapper: {
                    [theme.fn.largerThan('sm')]: {
                        position: 'relative',
                        '&:after': {
                            content: '""',
                            width: '1px',
                            height: '20px',
                            backgroundColor: '#E4E8EC',
                            position: 'absolute',
                            right: 0,
                            top: '13px',
                        },
                    },
                },
            }), itemComponent: CustomSelectItem$1, filter: (value, item) => item.label.toLowerCase().includes(value.toLowerCase().trim()), onChange: (value) => {
                if (value == null)
                    return;
                const specialty = specialtyData.find((i) => String(i.id) === value);
                if (!specialty)
                    return;
                onSpecialtyClick(Object.assign(Object.assign(Object.assign({}, specialty), { thumbnail: specialty.thumbnail || '' }), (Number(value) !== -1 && {
                    total_doctor: 0,
                })));
            } })));
};

const SearchInputs = React.forwardRef(({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }, ref) => {
    const { t } = index$1.useTranslations();
    const theme = core.useMantineTheme();
    const inputSearchWrapperRef = React.useRef(null);
    const internalInputRef = React.useRef(null);
    React.useImperativeHandle(ref, () => ({
        focus: () => {
            var _a;
            (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        },
    }));
    const hasSearchIcon = !onlyShowSearchBox;
    const gaAttributes = React.useMemo(() => {
        if (trackingAttributes) {
            return {
                'data-event-category': trackingAttributes.dataEventCategory,
                'data-event-action': trackingAttributes.dataEventAction,
                'data-event-label': trackingAttributes.dataEventLabel,
            };
        }
        else {
            return {};
        }
    }, [trackingAttributes]);
    const placeholderSearch = React.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 styleInputWrapper = React.useMemo(() => {
        return {
            root: {
                flex: 1,
                '&.hide-specialty-selection': {
                    '.mantine-Input-rightSection': {
                        display: 'none',
                    },
                    input: {
                        paddingLeft: hasSearchIcon ? 48 : 16,
                        [theme.fn.smallerThan('sm')]: {
                            height: 40,
                            fontSize: core.rem(14),
                        },
                    },
                    '.mantine-Input-icon': {
                        left: '0',
                    },
                },
            },
        };
    }, [hasSearchIcon, theme]);
    const styleInput = React.useMemo(() => {
        return {
            icon: {
                left: '205px',
            },
            input: {
                color: '#262626',
                '&[data-with-icon="true"]': {
                    paddingLeft: '245px',
                    paddingRight: '16px',
                },
            },
            rightSection: {
                left: 0,
                width: '205px',
                padding: '1px',
            },
        };
    }, []);
    const styleInputSpecialties = React.useMemo(() => {
        return {
            input: {
                color: '#262626',
            },
        };
    }, []);
    useOutsideClick.useOutsideClick(inputSearchWrapperRef, () => {
        !isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
    });
    const handleSearchInputChange = React.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 = React.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 = React.useCallback((e) => {
        if (e.key === 'Enter') {
            e.stopPropagation();
            e.preventDefault();
            onEnterSearch && onEnterSearch();
        }
    }, [onEnterSearch]);
    return (React__default["default"].createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef }, type === 'specialty' ? (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
        React__default["default"].createElement(core.Input, { ref: internalInputRef, icon: hasSearchIcon && React__default["default"].createElement(core$1.Search, null), size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputSpecialties, value: state.searchKeywords, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearchSpecialty }), onChange: (event) => {
                handleSearchInputChange(event.target.value);
            }, onKeyDown: inputOnKeyDown }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
        type === 'service' ? (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
            React__default["default"].createElement(core.Input, { ref: internalInputRef, icon: hasSearchIcon && React__default["default"].createElement(core$1.Search, null), size: isMobile ? 'md' : 'lg', name: "search-results", placeholder: placeholderSearch, onFocus: () => {
                    dispatch({ type: ActionTypes.FocusInputSearch });
                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
                }, value: state.searchKeywords, onChange: (event) => {
                    handleSearchInputChange(event.target.value);
                }, onKeyDown: inputOnKeyDown }))) : (React__default["default"].createElement(React__default["default"].Fragment, null, isMobile && !hideSpecialtySelection ? (React__default["default"].createElement(React__default["default"].Fragment, null,
            !onlyShowSearchBox && (React__default["default"].createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick })),
            React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
                React__default["default"].createElement(core.Input, { ref: internalInputRef, icon: hasSearchIcon && React__default["default"].createElement(core$1.Search, null), size: "md", placeholder: placeholderSearch, value: state.searchKeywords, name: "search-results", onFocus: () => {
                        dispatch({ type: ActionTypes.FocusInputSearch });
                        onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
                    }, onChange: (event) => {
                        handleSearchInputChange(event.target.value);
                    }, onKeyDown: inputOnKeyDown })))) : (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper, className: hideSpecialtySelection ? 'hide-specialty-selection' : '' },
            React__default["default"].createElement(core.Input, Object.assign({ ref: internalInputRef, icon: hasSearchIcon && React__default["default"].createElement(core$1.Search, null), size: "lg", placeholder: placeholderSearch, styles: styleInput, name: "search-results", autoComplete: "off", value: state.searchKeywords, onChange: (event) => {
                    handleSearchInputChange(event.target.value);
                }, onFocus: () => {
                    dispatch({ type: ActionTypes.FocusInputSearch });
                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
                }, onKeyDown: inputOnKeyDown }, gaAttributes, { rightSection: hideSpecialtySelection ? (React__default["default"].createElement(React__default["default"].Fragment, null)) : (!onlyShowSearchBox && (React__default["default"].createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }))) })))))),
        !isMobile && (React__default["default"].createElement(StyleResultWrapper, null,
            React__default["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 = tslib_es6.__rest(_a, ["searchInputEle", "closeModal", "children"]);
    const theme = core.useMantineTheme();
    return (React__default["default"].createElement(index$3.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["default"].createElement(core.Stack, { spacing: 16, sx: { paddingTop: 16 } },
            React__default["default"].createElement(core.Flex, { align: 'center', gap: 12 },
                React__default["default"].createElement(arrow.ArrowLeft, { size: 28, onClick: closeModal, color: theme.fn.primaryColor() }),
                React__default["default"].createElement(core.Box, { sx: { width: '100%' } }, searchInputEle)),
            children)));
};

const StyleSearchLocationWrapper = styled__default["default"].div `
  position: relative;

  ${utils.MediaQueries.mbDown} {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
`;
styled__default["default"].div `
  position: absolute;
  top: calc(100% + 2px);
  width: 100%;
  border-radius: 4px;
  background: ${miscTheme.theme.colors.white};
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;

  ${utils.MediaQueries.mbDown} {
    width: calc(100% + 64px);
    left: -32px;
  }
`;
const StyledLocationItem = styled__default["default"].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: ${miscTheme.theme.colors.neutral100};
  }

  &:not([data-is-denied='true']):hover {
    background-color: ${miscTheme.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__default["default"](utils$1.PinIcon) `
  width: 12px;
  height: 18px;
  flex: 0 0 12px;
`;

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

const SearchLocation = ({ state, debouncedFetchCitiesByKeyword, selectedLocation, trackingAttributes, onLocationClick, dispatch, }) => {
    var _a;
    const { t, locale } = index$1.useTranslations();
    const inputLocationWrapperRef = React.useRef(null);
    const citiesData = React.useMemo(() => {
        var _a;
        return [
            {
                name: t('booking.searchBar.allLocations'),
                id: constants.ID_OPTION_ALL_LOCATION,
                slug: (_a = constants.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
            },
            ...state.cities,
        ];
    }, [state.cities, t, locale]);
    const gaAttributes = React.useMemo(() => {
        if (trackingAttributes) {
            return {
                'data-event-category': trackingAttributes.dataEventCategory,
                'data-event-action': trackingAttributes.dataEventAction,
                'data-event-label': trackingAttributes.dataEventLabel,
            };
        }
        return {};
    }, [trackingAttributes]);
    const handleSearchLocationInputChange = React.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.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["default"].createElement(StyleSearchLocationWrapper, { ref: inputLocationWrapperRef },
        React__default["default"].createElement(core.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", data: citiesData.map((city) => ({
                value: String(city.id),
                label: city.name,
                city,
            })), rightSection: React__default["default"].createElement(React__default["default"].Fragment, null) }, gaAttributes, { styles: (theme) => ({
                item: {
                    padding: 0,
                    '&[data-selected]': {
                        '&, &:hover': {
                            backgroundColor: 'transparent',
                            color: 'inherit',
                        },
                        '.location-item': {
                            '&::after': {
                                content: utils$1.checkMarkIconUrl,
                                top: '50%',
                                right: 19,
                                position: 'absolute',
                                transform: 'translateY(-50%)',
                            },
                        },
                    },
                    '&[data-hovered]': {
                        backgroundColor: 'transparent',
                    },
                },
                input: {
                    '&:not(.mantine-Textarea-input)': {
                        height: 48,
                        fontSize: core.rem(16),
                        paddingLeft: 16,
                        paddingRight: 16,
                        [theme.fn.smallerThan('sm')]: {
                            height: 40,
                            fontSize: core.rem(14),
                            paddingLeft: 14,
                            paddingRight: 14,
                        },
                    },
                },
                itemsWrapper: {
                    padding: 0,
                },
                dropdown: {
                    left: '0 !important',
                    border: 0,
                    marginTop: -7,
                    borderRadius: 0,
                    '& ::-webkit-scrollbar': {
                        width: '6px',
                        height: '6px',
                    },
                },
            }), itemComponent: CustomSelectItem, 
            // 3. Logic quan trọng nhất: Luôn trả về true để bỏ qua bộ lọc mặc định của Mantine
            // Vì chúng ta fetch data từ API hoặc dùng toàn bộ list ban đầu
            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);
            } }))));
};

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

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

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

  ${utils.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: ${miscTheme.theme.colors.gray800};
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }

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

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

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

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

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

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

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

const SearchTag = ({ state, type, typeInformation, dispatch }) => {
    const { t } = index$1.useTranslations();
    const { selectedLocation } = state;
    const typeSlug = React.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["default"].createElement(StyleSearchTagWrapper, null,
        React__default["default"].createElement(StyleTagLabel, null, t('booking.searchBar.popularKey')),
        state.popularKeys.map((item) => {
            return (React__default["default"].createElement(StyleTagItem, { key: item.id, onClick: () => handleClickKeyword(item) }, item.keyword));
        }),
        React__default["default"].createElement(StyleTagItem, { className: "view-all", onClick: handleViewAll }, t('booking.searchBar.viewAll'))));
};

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

const TabSearch = ({ currentTab, hideTabBookingSearch = [], hideSpecialtyTab, isMobile, setCurrentTab, }) => {
    const { t } = index$1.useTranslations();
    const stylesTabs = React.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 = React.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 = React.useMemo(() => {
        return (tabConfig.filter((item) => !hideTabBookingSearch.includes(item.value)) ||
            []);
    }, [hideTabBookingSearch, tabConfig]);
    return (React__default["default"].createElement(StyledTabWrapper, { className: "booking-search-tab" },
        React__default["default"].createElement(StyleTabContainer, null,
            React__default["default"].createElement(core.Tabs, { value: currentTab, onTabChange: (tab) => {
                    setCurrentTab(tab);
                }, styles: stylesTabs },
                React__default["default"].createElement(core.Tabs.List, null, activeTabs.map((tab) => {
                    return (React__default["default"].createElement(core.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 = React.useCallback(function fetchCitiesApi(path, params = {}) {
        const url = `${careApiDomain}${path}`;
        dispatch({ type: ActionTypes.FetchCitiesStart });
        return fetch(utils$1.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 = React.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.PATHS.GET_CITY_BY_IP, Object.assign(Object.assign(Object.assign({}, params), moreParams), { hospitalActive: 1, client: constants.CLIENT_KEY.MSD === client ? '' : client })),
        ];
        if (locale === 'zh-TW') {
            requests.push(fetchCitiesApi(paths.PATHS.GET_CITIES_LIST, {
                noPaging: 1,
                hospitalActive: 1,
                client: constants.CLIENT_KEY.MSD === client ? '' : client,
            }));
        }
        else {
            requests.push(fetchCitiesApi(paths.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 fetchCitiesByDefault = React.useCallback(function fetchCitiesByDefault() {
        return fetchCitiesApi(paths.PATHS.GET_CITIES_LIST, {
            noPaging: 1,
            hospitalActive: 1,
        })
            .then((data) => {
            dispatch({
                type: ActionTypes.FetchCitiesByDefaultComplete,
                payload: data.cities || [],
            });
        })
            .catch((err) => console.error('error loading cities by default', err));
    }, [locale, careApiDomain, dispatch]);
    const fetchCitiesByKeyword = React.useCallback(function fetchCitiesByKeyword(keyword) {
        return fetchCitiesApi(paths.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 = React.useCallback(function fetchSearchResults(searchKeywords, state, searchType, clientSlug, cacheResult) {
        const url = searchType === 'specialty'
            ? `${careApiDomain}${paths.PATHS.GET_SEARCH_SPECIALTY}`
            : `${careApiDomain}${paths.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 === constants.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(utils$1.getApiPath(url, Object.assign({ domain: careApiDomain, searchType: searchType || 'global', keyword: keyword, city: cityId === constants.ID_OPTION_CURRENT_LOCATION ? '' : cityId, lat,
            lng,
            specialty_id, client_slug: constants.CLIENT_KEY.MSD === clientSlug ? '' : clientSlug, msd: constants.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 = React.useCallback(function fetchSearchSpecialties() {
        const url = `${careApiDomain}${paths.PATHS.GET_SEARCH_SPECIALTY}`;
        return fetch(utils$1.getApiPath(url, {
            domain: careApiDomain,
            searchType: '',
            msd: constants.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 = React.useCallback(function fetchPopularKeys(searchType) {
        const url = `${careApiDomain}${paths.PATHS.GET_SEARCH_POPULAR_KEY}`;
        return fetch(utils$1.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,
        fetchCitiesByDefault,
        fetchCitiesByKeyword,
        fetchSearchResults,
        fetchAllSpecialties,
        fetchPopularKeys,
    };
}

const BookingSearchBarV2 = ({ 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 } = index$1.useTranslations();
    const wrapperRef = React.useRef(null);
    const searchInputDesktopRef = React.useRef(null);
    const searchInputMobileRef = React.useRef(null);
    const inputSearchSpecialtyWrapperRef = React.useRef(null);
    const [currentTab, setCurrentTab] = React.useState(initTypeSearch);
    const { geoLocationPermission: geoLocationPermissionFromHook, geoLocationCoordinates: geoLocationCoordinatesFromHook, } = utils$1.useGeolocation();
    const [state, dispatch] = React.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 { fetchCitiesByDefault, fetchCitiesByKeyword, fetchSearchResults, fetchAllSpecialties, fetchPopularKeys, } = useSearchBarApi({
        dispatch,
        locale,
        careApiDomain,
        client: clientSlug,
    });
    const slugs = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
    const [opened, { close, open }] = hooks.useDisclosure(false);
    const typeInformation = React.useMemo(() => {
        return Object.assign({ doctor: {
                name: t('booking.searchPopup.doctors'),
                icon: React__default["default"].createElement(DoctorIcon, null),
                slug: slugs.DOCTOR,
            }, service: {
                name: t('booking.searchPopup.services'),
                icon: React__default["default"].createElement(ServiceIcon, null),
                slug: slugs.SERVICE,
            }, hospital: {
                name: t('booking.searchPopup.hospitals'),
                icon: React__default["default"].createElement(HospitalIcon, null),
                slug: slugs.HOSPITAL,
            } }, (!hideSpecialtyTab && {
            specialty: {
                name: t('booking.searchPopup.specialties'),
                icon: React__default["default"].createElement(SpecialtyIcon, null),
                slug: slugs.SPECIALTIES,
            },
        }));
    }, [currentTab]);
    const debouncedFetchCitiesByKeyword = React.useMemo(() => debounce__default["default"](fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
    const debouncedFetchSearchResults = React.useMemo(() => debounce__default["default"](fetchSearchResults, 400), [fetchSearchResults]);
    // function focusSearchInput() {
    //   if (wrapperRef.current) {
    //     wrapperRef.current
    //       .querySelector<HTMLInputElement>('input[name="search-results"]')
    //       ?.focus()
    //   }
    // }
    const onClickSearchByKeyword = React.useCallback(function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
        var _a;
        close();
        let url = '';
        const { slug: typeSlug } = typeInformation[currentTab];
        let moreParams = '';
        const slugClientUrl = constants.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 = React.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.useOutsideClick(inputSearchSpecialtyWrapperRef, () => {
        !isMobile &&
            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
    });
    // useEffect(() => {
    //   if (geoLocationPermission !== 'denied' && !initialSelectedCity) {
    //     dispatch({
    //       type: ActionTypes.SelectLocation,
    //       payload: {
    //         name: t('booking.searchBar.allLocations'),
    //         id: ID_OPTION_ALL_LOCATION,
    //         slug: LOCALIZED_SLUGS[locale]?.ALL,
    //       },
    //     })
    //   }
    //   if (onGeoLocationPermissionChange) {
    //     onGeoLocationPermissionChange(
    //       geoLocationPermission,
    //       state.geoLocationCoordinates,
    //     )
    //   }
    //   if (isMobile && geoLocationPermission === 'granted' && selectedLocation) {
    //     dispatch({ type: ActionTypes.FocusInputSearch })
    //   }
    //   fetchCitiesByDefault()
    // }, [geoLocationPermission])
    React.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]);
    React.useEffect(() => {
        var _a;
        if (initialSelectedCityFromProps || selectedLocation)
            return;
        dispatch({
            type: ActionTypes.SelectLocation,
            payload: {
                name: t('booking.searchBar.allLocations'),
                id: constants.ID_OPTION_ALL_LOCATION,
                slug: (_a = constants.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
            },
        });
    }, [dispatch, initialSelectedCityFromProps, locale, selectedLocation, t]);
    React.useEffect(() => {
        fetchAllSpecialties();
        fetchCitiesByDefault();
    }, []);
    React.useEffect(() => {
        fetchPopularKeys(currentTab);
    }, [currentTab]);
    React.useEffect(() => {
        if (navigateTo) {
            if (routerPush) {
                routerPush(navigateTo);
            }
            else {
                window.location.href = `${careFrontDomain}${navigateTo}`;
            }
        }
    }, [navigateTo]);
    React.useEffect(() => {
        fetchSearchResults(state.searchKeywords, state, currentTab, clientSlug, true);
    }, [currentTab]);
    React.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["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(StyledSearchBarWrapper, { ref: wrapperRef },
            React__default["default"].createElement(TabSearch, { currentTab: currentTab, setCurrentTab: setCurrentTab, isMobile: isMobile, hideTabBookingSearch: hideTabBookingSearch, hideSpecialtyTab: hideSpecialtyTab }),
            React__default["default"].createElement(StyleWrapperContainer, { className: "booking-search-container" },
                React__default["default"].createElement(StyleSearchInputContainer, null,
                    React__default["default"].createElement(StyleSearchContent, { className: "booking-search-content" },
                        React__default["default"].createElement("div", { ref: inputSearchSpecialtyWrapperRef },
                            React__default["default"].createElement(core.Flex, { gap: "12px", justify: "space-between", align: "center", direction: isMobile ? 'column' : 'row', className: "flex-search-input" },
                                currentTab !== 'specialty' && (React__default["default"].createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
                                React__default["default"].createElement(SearchInputs, Object.assign({}, searchInputsProps, { ref: searchInputDesktopRef, onFocusInput: () => isMobile && open() })),
                                React__default["default"].createElement(index$4.Button, { size: isMobile ? 'md' : 'lg', fullWidth: isMobile, variant: "primary", onClick: () => onClickSearchByKeyword(), styles: {
                                        root: {
                                            height: isMobile ? '40px' : '48px',
                                        },
                                    } }, t('booking.searchBar.searchButton'))),
                            !hidePopularSearchKeys &&
                                currentTab !== 'specialty' &&
                                state.popularKeys.length > 0 && (React__default["default"].createElement(SearchTag, { type: currentTab, state: state, typeInformation: typeInformation, dispatch: dispatch })),
                            currentTab === 'specialty' &&
                                focusedSpecialty === 'search' && (React__default["default"].createElement(SearchResultSpecialties, { state: state, isMobile: isMobile, dispatch: dispatch, specialties: (searchResults === null || searchResults === void 0 ? void 0 : searchResults.specialty) || [], isLoading: isLoadingSearchResults }))))))),
        isMobile && (React__default["default"].createElement(ModalSearchResult, { keepMounted: true, opened: opened, onClose: close, closeModal: close, searchInputEle: React__default["default"].createElement(core.Flex, { align: 'center', gap: 8 },
                React__default["default"].createElement(SearchInputs, Object.assign({}, searchInputsProps, { onlyShowSearchBox: true, ref: searchInputMobileRef })),
                React__default["default"].createElement(index$4.Button, { variant: "primary", leftIcon: React__default["default"].createElement(core$1.Search, { size: 20, color: '#fff' }), onClick: () => onClickSearchByKeyword() })) },
            React__default["default"].createElement(core.Box, { sx: {
                    marginLeft: -16,
                    marginRight: -16,
                } },
                React__default["default"].createElement(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug }))))));
};

exports.BookingSearchBarV2 = BookingSearchBarV2;
