/* 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 { locationInfo, changeChooseInfo, getNowLocation } = useModel(
    MapModel,
    ['locationInfo']
  );
  const { setLocation } = useModel(Login, []);
  const { location } = locationInfo;
  const [show, setshow] = React.useState<boolean>(false);
  useMount(() => {
    toastShow();
    getNowLocation().then(() => {
      setTimeout(() => {
        setshow(true);
        setTimeout(() => {
          toastHide();
        }, 1000);
      }, 300);
    });
  });
  return (
    <>
      {show && (
        <WebView
          source={{
            uri: `http://dingdong.izouma.com/map/chooseLocation?location=${location.lat},${location.lng}`,
          }}
          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();
          }}
        />
      )}
    </>
  );
}