/* eslint-disable react/style-prop-object */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { WebView } from "react-native-webview";
import { Toast, Portal } from "@ant-design/react-native";
import { useMount } from "ahooks";
import { useModel } from "flooks";
import { getLocation } from "../Utils/MapUtils";

export default function SearchMapScreen({ navigation }) {
  const { saveLocation, setchooseLocal } = useModel("userModel", true);
  const webRef = React.useRef();
  const { showDialog } = useModel("dialogModel", true);
  useMount(() => {
    const key = Toast.loading("Loading...", 0);
    getLocation().then(res => {
      let location = "";
      // saveLocation(
      //   "江苏省南京市建邺区白龙江东街9号新城科技园科技创新综合体",
      //   31.981402,
      //   118.737781
      // ).then(() => {
      //   navigation.goBack();
      // });
      if (res.addressName !== "定位失败") {
        location = `${res.location.lat},${res.location.lng}`;
      }
      webRef.current.injectJavaScript(`window.setLocation('${location}')`);
      Portal.remove(key);
    });
  });

  function showChange(val, title, max, type) {
    showDialog({
      pla: "",
      maxLength: max || 50,
      defaultValue: val,
      InputType: type,
      isEdit: true,
      title,
      cancelable: true,
      confirmCallback: info => {
        console.log("当前已经选择");
        saveLocation(info).then(() => {
          navigation.goBack();
        });
      },
    });
  }
  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);
        setchooseLocal(info.latlng);

        showChange(info.poiaddress + info.poiname, "请录入详细地址", 100);
      }}
    />
  );
}