/* eslint-disable react/style-prop-object */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Div } from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { WebView } from 'react-native-webview';
import { useTranslation } from 'react-i18next';

import { useRoute } from '@react-navigation/native';
import useModel from 'flooks';
import MapModel from './model';
import Login from '../login/model';
import { useMount } from 'ahooks';
import {
  toastShow,
  toastHide,
  toastInfo,
  toastSuccess,
} from '../utils/SystemUtils';

export default function SearchMapScreen({ navigation }) {
  const { t } = useTranslation();
  const { getNowLocation } = useModel(MapModel, []);
  const webRef = React.useRef();
  const { setLocation } = useModel(Login, []);
  const [show, setshow] = React.useState<boolean>(false);
  useMount(() => {
    toastShow();
    getNowLocation().then((res) => {
      let location = '';
      if (res.addressName !== '定位失败') {
        location = `${res.location.lat},${res.location.lng}`;
      }
      webRef.current.injectJavaScript(`window.setLocation('${location}')`);
      toastHide();
    });
  });
  return (
    <>
      <WebView
        ref={webRef}
        source={{
          uri: `http://dingdong.izouma.com/map/chooseLocation`,
        }}
        style={{ flexGrow: 1, width: '100%' }}
        onMessage={({ nativeEvent }) => {
          const info = JSON.parse(nativeEvent.data);
          console.log(info);
          setLocation(
            info.poiaddress + info.poiname,
            info.latlng.lat,
            info.latlng.lng
          );
          navigation.goBack();
        }}
      />
    </>
  );
}