import { Outlet } from "react-router";
import MapUtl from "./components/map/mapUtil";
import SocketService from "./util/socket";
const socketService = SocketService.getInstance();
const onMessage = (e: any) => {
  let data = JSON.parse(e);
  if (data.type === "accpt") {
    let maker: any = null;
    let body = JSON.parse(data.content.body);
    MapUtl.makerList?.forEach((e) => {
      if (e.userIdentity === body?.user.user_identity) {
        maker = e.marker;
      }
    });
    if (maker) {
      maker?.setPosition([body.address.long, body.address.lat]);
    } else {
      MapUtl.addMaker({
        lng: body.address.long ?? 103.872802,
        lat: body.address.lat ?? 30.523876,
        title: body?.user.user_name,
        users: body.user,
        clicks:(v)=>{
          console.log(v)
        }
      });
    }
  } else if (data.type === "move") {
    let maker: any = null;
    let body = JSON.parse(data.content.body);
    MapUtl.makerList?.forEach((e) => {
      if (e.userIdentity === body?.user_identity) {
        maker = e.marker;
      }
    });
    maker?.setPosition([body.long, body.lat]);
  }
};

socketService.on("message", onMessage);
const App = () => {
  return (
    <>
      <Outlet />
    </>
  );
};

export default App;
