"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_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
    };
  }
  /**
   * 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();
  }

  loadGoogleAsync() {
    return tslib_1.__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();
    });
  }

  get googleMapOptions() {
    const coordinates = {
      lat: this.props.latitude,
      lng: this.props.longitude
    };
    const googleMapOptions = {
      zoom: 4,
      center: coordinates
    };
    return googleMapOptions;
  }
  /**
   * @NOTE remember that all functions called with `setTimeout` or by `window` bound functions
   * like JSONP are going to call the functions with window binding
   * and lose scope of our function
   * so we bind it with an arrow fn
   */


  setAttributeForIframeElement() {
    const updateIframe = () => {
      const iframe = document.getElementById('googlemapdiv').querySelector('iframe'); // @todo @@peerf

      if (iframe && iframe.contentWindow) {
        iframe.contentWindow.document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
      }
    };

    setTimeout(updateIframe, 1000);
  }
  /**
   * 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__ = window.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED__ || {};
    window.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED__.googleMapNode = this.references.googleMap; // window.googleMapNode = this.references.googleMap
    // window.googleMapDivNode = this.references.googleMapDivNode

    this.setAttributeForIframeElement();
  }

  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