import React, { useImperativeHandle, useEffect, useRef, forwardRef } from 'react';
import {
//   StyleSheet,
SafeAreaView
//   NativeEventEmitter,
} from 'react-native';
import WebView from 'react-native-webview';
// import { JOdpModule } from 'react-native-ctp-odp';

const MapHtml = require('./JibestreamMap.html');
const handleLogMessage = (level, message) => {
  switch (level) {
    case 'LOG':
      console.log('MESSAGE FROM WEBVIEW:', message);
      break;
    case 'DEBUG':
      console.debug('MESSAGE FROM WEBVIEW:', message);
      break;
    case 'INFO':
      console.info('MESSAGE FROM WEBVIEW:', message);
      break;
    case 'WARN':
      console.warn('MESSAGE FROM WEBVIEW:', message);
      break;
    case 'ERROR':
      console.error('MESSAGE FROM WEBVIEW:', message);
      break;
  }
};
const MapView = (props, parentRef) => {
  const webviewRef = useRef(null);

  //   useEffect(() => {
  //     console.log('Initializing Event Emitter'); // "someValue"
  //     const eventEmitter = new NativeEventEmitter(JOdpModule);
  //     eventEmitter.addListener('onReady', (event) => {
  //       props.onOdpEvent.onReady?.(event as ODP_ON_READY_TYPE);
  //     });
  //     eventEmitter.addListener('onKeyValidation', (event) => {
  //       props.onOdpEvent.onKeyValidation?.(event as ODP_ON_KEY_VALIDATION_TYPE);
  //     });
  //     eventEmitter.addListener('onNavigationUpdate', (event) => {
  //       props.onOdpEvent.onNavigationUpdate?.(
  //         event as ODP_ON_NAVIGATION_UPDATE_TYPE
  //       );
  //     });
  //     eventEmitter.addListener('onFacilityUpdate', (event) => {
  //       props.onOdpEvent.onFacilityUpdate?.(event as ODP_ON_FACILITY_UPDATE_TYPE);
  //     });
  //     return () => {
  //       eventEmitter.removeAllListeners('onReady');
  //       eventEmitter.removeAllListeners('onKeyValidation');
  //       eventEmitter.removeAllListeners('onNavigationUpdate');
  //       eventEmitter.removeAllListeners('onFacilityUpdate');
  //     };
  //   }, []);

  useEffect(() => {}, []);
  const onWayfindToWaypoint = waypointId => {
    sendCommandToMap('WAYFIND_TO_WAYPOINT', waypointId);
  };
  const onWayfindBetweenWaypoints = (originId, destinationId) => {
    sendCommandToMap('WAYFIND_BETWEEN_WAYPOINTS', {
      originId,
      destinationId
    });
  };
  const drawNavigationPath = function (pathId) {
    let shouldFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    let style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
      stroke: '#ffc956',
      strokeWidth: 3
    };
    sendCommandToMap('DRAW_NAVIGATION_PATH', {
      pathId,
      style,
      shouldFocus
    });
  };
  const onStyleShape = function (unitId) {
    let style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
      fill: '#ABABAB'
    };
    sendCommandToMap('STYLE_SHAPE', {
      id: unitId,
      style
    });
  };
  const onStyleUnitsForDestination = function (destination) {
    let style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
      fill: '#ABABAB'
    };
    sendCommandToMap('STYLE_SHAPE', {
      destination,
      style
    });
  };
  useImperativeHandle(parentRef, () => {
    const listeners = {
      setUserPosition: (lat, long) => {
        sendCommandToMap('UPDATE_USER_LOCATION', {
          lat,
          long
        });
      },
      wayfindToWaypoint: waypointId => {
        onWayfindToWaypoint(waypointId);
      },
      wayfindBetweenWaypoints: (originId, destinationId) => {
        onWayfindBetweenWaypoints(originId, destinationId);
      },
      drawNavigationPath: (pathId, shouldFocus, style) => {
        drawNavigationPath(pathId, shouldFocus, style);
      },
      styleUnitsForDestination: (destination, style) => {
        onStyleUnitsForDestination(destination, style);
      },
      styleShape: (unitId, style) => {
        onStyleShape(unitId, style);
      }
    };
    return listeners;
  });
  function onMessage(message) {
    var _props$onMapMessage$o, _props$onMapMessage, _props$onMapMessage$o2, _props$onMapMessage2, _props$onMapMessage$o3, _props$onMapMessage3;
    const obj = JSON.parse(message.nativeEvent.data);
    const command = obj.command;
    const data = obj.data;
    // props.onMapMessage(command, data);
    switch (command) {
      case 'DESTINATION_SELECTED':
        (_props$onMapMessage$o = (_props$onMapMessage = props.onMapMessage).onDestinationSelected) === null || _props$onMapMessage$o === void 0 ? void 0 : _props$onMapMessage$o.call(_props$onMapMessage, data);
        break;
      case 'NAVIGATION_PATH_GENERATED':
        const obj = data;
        (_props$onMapMessage$o2 = (_props$onMapMessage2 = props.onMapMessage).onNavigationPathGenerated) === null || _props$onMapMessage$o2 === void 0 ? void 0 : _props$onMapMessage$o2.call(_props$onMapMessage2, obj.pathId, obj.instructions, obj.start, obj.end, obj.path);
        break;
      case 'USER_POSITION_UPDATED':
        (_props$onMapMessage$o3 = (_props$onMapMessage3 = props.onMapMessage).onUserPositionUpdated) === null || _props$onMapMessage$o3 === void 0 ? void 0 : _props$onMapMessage$o3.call(_props$onMapMessage3, data);
        break;
      case 'CONSOLE_LOG':
        const logObj = data;
        handleLogMessage(logObj.level, logObj.message);
        break;
      default:
        console.log('Unhandled command from map:', command, data);
        break;
    }
  }
  function sendCommandToMap(command, data) {
    const clientResponseCode = `
    window.postMessage(${JSON.stringify({
      command,
      data
    })}, "*");
    true;
  `;
    if (webviewRef.current)
      // @ts-ignore
      webviewRef.current.injectJavaScript(clientResponseCode);
  }
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: {
      flex: 1,
      width: '100%',
      height: '100%'
    }
  }, /*#__PURE__*/React.createElement(WebView
  // injectedJavaScript={debugging}
  , {
    ref: webviewRef,
    scalesPageToFit: false,
    mixedContentMode: "compatibility",
    onMessage: onMessage,
    source: MapHtml
  }));
};
export default /*#__PURE__*/forwardRef(MapView);
//# sourceMappingURL=MapView.js.map