import { jsx as _jsx } from "react/jsx-runtime";
/* https://github.com/google-map-react/google-map-react/blob/HEAD/API.md */
import { useEffect, useMemo, memo } from 'react';
import { useAppDispatch, useAppSelector } from 'src/app/redux/store';
import useWindowSize from 'src/lib/common/hooks/useWindowSize';
import { initMarkerPos, setClickedMarkerId, setClickedMarkerPos, } from 'src/app/redux/slices/common';
import GoogleMap from './GoogleMap';
import css from './Maps.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
var ResultGoogleMap = function (_a) {
    var markerData = _a.markerData, isMobile = _a.isMobile, mobileMapView = _a.mobileMapView;
    var dispatch = useAppDispatch();
    var windowSize = useWindowSize();
    var zipLatLng = useAppSelector(function (state) { return state.common.zipLatLng; });
    var mapHeight = useMemo(function () { return (70 / 100) * windowSize.height; }, [windowSize.height]);
    useEffect(function () {
        dispatch(setClickedMarkerId(0));
        dispatch(setClickedMarkerPos(initMarkerPos));
        markerData.sort(function (a, b) {
            if (a.IsVip && !b.IsVip)
                return 1;
            if (a.IsTeenDoctor && !b.IsTeenDoctor)
                return 1;
            return b.SegmentCode - a.SegmentCode;
        });
    }, [markerData]);
    var hero = document.querySelector("[id=\"hero\"");
    var filter = document.querySelector("[id=\"result-filter\"");
    var hheight = hero ? hero.getBoundingClientRect().height + 10 : 0;
    var fheight = filter ? filter.getBoundingClientRect().height + 10 : 0;
    return (_jsx("div", { style: {
            height: mobileMapView ? "calc(100vh - (".concat(hheight, "px + ").concat(fheight, "px)") : mapHeight,
            maxHeight: '100%',
            width: '100%',
            boxShadow: !isMobile
                ? 'rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.25) 0px 3px 7px -3px'
                : "",
        }, className: "map-selector ".concat(cx('inner-map-container')), children: _jsx(GoogleMap, { markerData: markerData, zipLatLng: zipLatLng, isMobile: isMobile }) }));
};
export default memo(ResultGoogleMap);
