import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Dimensions, View } from 'react-native';
import { WebView } from 'react-native-webview';
import { useCreation } from '@umijs/hooks';

export default function MapScreen({ orderInfo }) {
  // console.log(orderInfo);

  const webRef = React.useRef();

  const { location, merLocation, ridLocation } = orderInfo;

  const merchantLocation = useCreation(() => {
    if (merLocation) {
      return {
        lat: merLocation.split(',')[1],
        lng: merLocation.split(',')[0],
      };
    } else {
      return null;
    }
  }, [merLocation]);
  const userLocation = useCreation(() => {
    if (location) {
      return {
        lat: location.split(',')[1],
        lng: location.split(',')[0],
      };
    } else {
      return null;
    }
  }, [location]);
  const riderLocation = useCreation(() => {
    if (ridLocation) {
      return {
        lat: ridLocation.split(',')[1],
        lng: ridLocation.split(',')[0],
      };
    } else {
      return null;
    }
  }, [ridLocation]);

  return (
    <WebView
      ref={webRef}
      source={{
        uri: `http://dingdong.izouma.com/map/home`,
      }}
      onLoad={() => {
        webRef.current.injectJavaScript(
          `window.setLocation(${JSON.stringify(orderInfo)},${JSON.stringify(
            userLocation
          )},${JSON.stringify(merchantLocation)},${JSON.stringify(
            ridLocation
          )})`
        );
      }}
    />
  );
}