"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const exotic_1 = require("exotic");
const loadGoogle_1 = require("./deps/loadGoogle");
const styled_1 = require("./styled");
const fixture_1 = require("./fixture");
const IS_BROWSER = typeof window === 'object';
const IS_GOOGLE = typeof google === 'object';
class GoogleMap extends react_1.default.PureComponent {
    constructor() {
        super(...arguments);
        this.references = {
            googleMapDomDiv: react_1.default.createRef(),
            googleMap: undefined,
        };
        this.loadGoogleAsync = () => __awaiter(this, void 0, void 0, function* () {
            // load it again!!!!!!!!!!!!!!!!
            if (exotic_1.isObj(window.google)) {
                // we already loaded it...
                this.handleGoogleApisLoad();
                return;
            }
            yield loadGoogle_1.loadGoogle();
            this.handleGoogleApisLoad();
        });
    }
    /**
     * only add global script callback in the browser
     * @todo abstract
     *
     * @note the reason this stopped loading is this triggers on a callback from google
     *       but when we already load google for autosuggest, the callback is never needed
     */
    componentDidMount() {
        console.debug('[GoogleMap] componentDidMount');
        this.loadGoogleAsync();
    }
    get googleMapOptions() {
        const coordinates = {
            lat: this.props.latitude,
            lng: this.props.longitude,
        };
        const googleMapOptions = {
            zoom: 4,
            center: coordinates,
        };
        return googleMapOptions;
    }
    /**
     * google essentially wants you to give it a dom element
     * then it will force render itself onto it
     */
    handleGoogleApisLoad() {
        const googleOptions = this.googleMapOptions;
        const markerPosition = this.props.markerPosition;
        this.references.googleMap = new google.maps.Map(document.getElementById(this.props.id), googleOptions);
        const processEachMarkerLocation = location => {
            return new google.maps.Marker({
                position: location,
                map: this.references.googleMap,
            });
        };
        const marker = markerPosition.map(processEachMarkerLocation);
        const styledMapType = new google.maps.StyledMapType(this.props.styleOptions, this.props.typeOptions);
        this.references.googleMap.mapTypes.set('styled_map', styledMapType);
        this.references.googleMap.setMapTypeId('styled_map');
        window.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED__.googleMapNode = this.references.googleMap;
    }
    render() {
        const { qa, latitude, longitude, typeOptions, styleOptions, className, id, } = this.props;
        // @NOTE needs a wrapping div when we use this `ref`
        return (react_1.default.createElement(styled_1.StyledGoogleMapWrapper, { className: className },
            react_1.default.createElement(styled_1.StyledGoogleMap, { "data-qa": qa, ref: this.refs.googleMapDivNode, id: id })));
    }
}
GoogleMap.defaultProps = {
    className: '',
    qa: fixture_1.qaAttributes.mapContainer,
    id: fixture_1.identifiers.outerWrapperID,
    latitude: fixture_1.data.latitude,
    longitude: fixture_1.data.longitude,
    typeOptions: {
        name: fixture_1.wordings.mapType,
    },
    markerPosition: fixture_1.data.markerPositions,
    styleOptions: exotic_1.EMPTY_ARRAY,
};
exports.GoogleMap = GoogleMap;
exports.default = GoogleMap;
//# sourceMappingURL=GoogleMap.js.map