// 'use client'
// import 'mapbox-gl/dist/mapbox-gl.css';
// import mapboxgl from "mapbox-gl";
// import './ui.css';
// import React, { useRef, useEffect, useState } from 'react';
// import io from 'socket.io-client'
// import Worker from 'web-worker';
// import TitikGempa from './components/mapbox_marker/titik_gempa';
// import GempaBumiAlert from './components/GempaBumiAlert';
// import * as turf from '@turf/turf'
// import Card from './components/card/card';
// import { createRoot } from 'react-dom/client';
// import AnimatedPopup from 'mapbox-gl-animated-popup';
// import ItemKotaTerdampak from './components/ItemKotaTerdampak';
// import { KotaTerdampak, InfoGempa, InfoTsunami } from "../libs/interface";
// import Jam from './components/Jam';
// const { DateTime } = require("luxon");
// import { IoLocationSharp } from "react-icons/io5";
// import { XMLParser, XMLBuilder, XMLValidator } from "fast-xml-parser";
// import TitikTsunami from './components/mapbox_marker/titik_tsunami';

// // import { HexGrid, Layout, Hexagon, Text, Pattern, Path, Hex, GridGenerator, HexUtils } from 'react-hexgrid';
// // import { css } from "@emotion/react"

// // const initialConfig: any = {
// //   width: 1000,
// //   height: 800,
// //   layout: { width: 8, height: 8, flat: false, spacing: 1.02 },
// //   origin: { x: 0, y: 0 },
// //   map: "parallelogram",
// //   mapProps: [10],
// // }
// // const generator = GridGenerator.getGenerator(initialConfig.map)

// // const initialHexagons: Hex[] = generator(initialConfig.mapProps)


// mapboxgl.accessToken = 'pk.eyJ1IjoiYmFndXNpbmRyYXlhbmEiLCJhIjoiY2p0dHMxN2ZhMWV5bjRlbnNwdGY4MHFuNSJ9.0j5UAU7dprNjZrouWnoJyg';



// let socket;
// export default function Home() {
//   // const [hexagons, setHexagons] = React.useState(initialHexagons)
//   // const [config, setConfig] = React.useState<any>(initialConfig)

//   // const layout = config.layout
//   // const size = { x: layout.width, y: layout.height }

//   const dangerSound = "/sounds/siren-alarm-96503.mp3"
//   const smallEarthQuakeSound = "/sounds/wrong-answer-129254.mp3"
//   const tsunamiAlertSound = "sounds/security-alarm-80493.mp3"
//   const mapContainer = useRef<HTMLDivElement | null>(null); // Update the type of mapContainer ref
//   const map = useRef<mapboxgl.Map | null>(null); // Update the type of the map ref
//   const [lng, setLng] = useState(123.90146694265115);
//   const [lat, setLat] = useState(-1.370489908625089);
//   const [zoom, setZoom] = useState(5);

//   const geoJsonData = useRef<any>(null);
//   const geoJsonCoastline = useRef<any>(null);
//   const geoJsonTitikGempa = useRef<any>(null);
//   const worker = useRef<Worker | null>(null);
//   const adaGempa = useRef<boolean>(false);
//   const tgs = useRef<TitikGempa[]>([]);
//   const titikGempaBaru = useRef<TitikGempa[]>([]);

//   const tts = useRef<TitikTsunami[]>([]);

//   const kts = useRef<KotaTerdampak[]>([]);
//   const markerDaerahs = useRef<any[]>([]);
//   const daerahTsunami = useRef<any[]>([]);

//   const lastGempaId = useRef<string>('');
//   const lastGempaKecilId = useRef<string>('');

//   const [detailInfoGempa, setDetailInfoGempa] = useState<InfoGempa | null>(null);
//   const [loadingScreen, setLoadingScreen] = useState<boolean>(true);

//   const [gempaDirasakan, setGempaDirasakan] = useState<TitikGempa | null>(null);
//   const [gempaTerakhir, setGempaTerakhir] = useState<TitikGempa | null>(null);
//   const [events, setEvents] = useState<TitikGempa[]>([]);
//   const [alertGempaBumi, setAlertGempaBumi] = useState<TitikGempa | null>(null);

//   const [alertGempaBumis, setAlertGempaBumis] = useState<InfoGempa[]>([]);

//   const [alertTsunami, setAlertTsunami] = useState<TitikTsunami | null>(null);


//   const [infoTsunami, setInfoTsunami] = useState<TitikTsunami | null>(null);
//   const blinkInterval = useRef<any>(null);


//   const warningHandler = async (data: any) => {
//     console.log("WARNING!!!");
//     const time = new Date().toLocaleTimeString();
//     const id = data.id ?? `tg-${time}`;


//     if (!map.current) return;
//     // map.current.flyTo({
//     //   center: [data.lng, data.lat],
//     //   zoom: 7,
//     //   essential: true
//     // });

//     const nig: InfoGempa = {
//       id: id,
//       lng: parseFloat(data.lng),
//       lat: parseFloat(data.lat),
//       mag: parseFloat(data.mag || 9.0),
//       depth: data.depth || "10 Km",
//       message: data.message,
//       place: data.place,
//       time: data.time || new Date().toLocaleString(),
//       listKotaTerdampak: []
//     };

//     const tg = new TitikGempa(id, nig, {
//       pWaveSpeed: 6000,
//       sWaveSpeed: 3000,
//       map: map.current!,
//       showMarker: true,
//       description: data.message,
//       showPopup: true,
//       showPopUpInSecond: 6,
//       zoomToPosition: true
//     });
//     tgs.current.push(tg);
//     titikGempaBaru.current.push(tg);


//     setAlertGempaBumis([...alertGempaBumis, nig]);


//     // tgs.current.push(tg);
//     // tgs.current.sort(function (a: any, b: any) {
//     //   return new Date(b.time).getTime() - new Date(a.time).getTime();
//     // });

//     const audioDangerElement = document.getElementById('danger');
//     setTimeout(() => {

//       if (audioDangerElement) {
//         (audioDangerElement as HTMLAudioElement).play();
//       }
//       setTimeout(() => {
//         var voice = new Audio("/voice/gempabumi.wav");
//         voice.play();
//       }, 2000);
//     }, 2000);


//     await new Promise(r => setTimeout(r, 6000));

//     setEvents(tgs.current);
//     if (worker.current != null) {
//       adaGempa.current = true;
//       console.log("Send Wave");
//       sendWave();
//     }
//     if (audioDangerElement) {
//       //set volume down
//       (audioDangerElement as HTMLAudioElement).volume = 0.5;
//     }

//   }

//   function blinkCoastline() {
//     if (blinkInterval.current) {
//       clearInterval(blinkInterval.current);
//     }
//     blinkInterval.current = setInterval(() => {
//       const visibility = map.current!.getLayoutProperty(
//         'outline-coastline',
//         'visibility'
//       );
//       map.current!.setLayoutProperty(
//         'outline-coastline',
//         'visibility',
//         visibility == 'visible' ? 'none' : 'visible'
//       );
//     }, 1000);

//   }

//   const warningTsunamiHandler = async (data: any) => {
//     // setInfoTsunami(data);
//     if (blinkInterval.current) {
//       clearInterval(blinkInterval.current);
//     }
//     const results: any = [];
//     daerahTsunami.current = [];

//     const time = new Date().toLocaleTimeString();
//     const id = data.id ?? `tg-${time}`;

//     const coordinates = data.point.coordinates.split(",");
//     const nit: InfoTsunami = {
//       id: id,
//       lng: parseFloat(coordinates[0]),
//       lat: parseFloat(coordinates[1]),
//       message: data.description + "\n" + data.instruction,
//       level: data.subject,
//       time: data.time || new Date().toLocaleString(),
//       listKotaTerdampak: []
//     };

//     let level = "WASPADA";

//     for (let x = 0; x < data.wzarea.length; x++) {
//       const wz = data.wzarea[x];
//       const cek = geoJsonCoastline.current.features.find((f) =>
//         wz.district.replaceAll("-", " ")
//           .replaceAll("PULAU ", "")
//           .replaceAll("KEPULAUAN ", "")
//           .replaceAll(" BAGIAN UTARA", "")
//           .replaceAll(" BAGIAN BARAT", "")
//           .replaceAll(" BAGIAN SELATAN", "")
//           .replaceAll(" BAGIAN TIMUR", "")
//         ===
//         f.properties.alt_name.replaceAll("KABUPATEN ", "")
//           .replaceAll("PULAU ", "")
//           .replaceAll("KEPULAUAN ", ""));
//       if (cek) {

//         let color = "yellow";
//         if (wz.level == "SIAGA") {
//           color = "orange";
//         } else if (wz.level == "AWAS") {
//           color = "red";
//         }
//         if (level == "WASPADA" && wz.level == "SIAGA") {
//           level = wz.level;
//         }

//         if (level == "SIAGA" && wz.level == "AWAS") {
//           level = wz.level;
//         }


//         cek.properties.color = color;
//         results.push(cek);

//         const dist = turf.distance(turf.point([nit.lng, nit.lat]), turf.point([cek.properties.longitude, cek.properties.latitude]));
//         const timeDist = Math.floor(dist / 3) * 1000;
//         nit.listKotaTerdampak!.push({
//           lng: cek.properties.longitude,
//           lat: cek.properties.latitude,
//           distance: dist,
//           name: cek.properties.alt_name,
//           hit: false,
//           timeArrival: new Date(new Date().getTime() + timeDist)
//         });
//       } else {
//         // console.log(info.wzarea);
//         console.log(wz);
//       }

//       nit.listKotaTerdampak!.sort((a, b) => a.distance - b.distance);

//     }

//     for (let x = 0; x < results.length; x++) {
//       const element = results[x];
//       const p: number[] = turf.centroid(element).geometry.coordinates;
//       if (markerDaerahs.current.findIndex((el) => el[0] == p[0] && el[1] == p[1]) == -1) {
//         markerDaerahs.current.push([p[0], p[1]]);
//         const markerParent = document.createElement('div');
//         const markerEl = document.createElement('div');
//         markerEl.innerHTML = '<p class="uppercase">' + element.properties.alt_name + '</p>';
//         markerEl.classList.add('marker-daerah');
//         markerEl.classList.add('show-pop-up');
//         markerParent.appendChild(markerEl);
//         new mapboxgl.Marker(markerParent)
//           .setLngLat([p[0], p[1]])
//           .addTo(map.current!)

//       }

//     }

//     const tt = new TitikTsunami(id, nit, {
//       pWaveSpeed: 6000,
//       sWaveSpeed: 3000,
//       map: map.current!,
//       showMarker: true,
//       description: data.description + "\n" + data.instruction,
//       showPopup: true,
//       showPopUpInSecond: 6,
//       zoomToPosition: true,
//       closePopUpInSecond: 13
//     });
//     tts.current.push(tt);

//     setAlertTsunami(tt);


//     daerahTsunami.current = results;
//     if (results.length > 0) {
//       if (map.current!.getSource('coastline')) {
//         (map.current!.getSource('coastline') as mapboxgl.GeoJSONSource).setData({ "type": "FeatureCollection", "features": results });
//       } else {
//         map.current!.addSource('coastline', {
//           'type': 'geojson',
//           'data': { "type": "FeatureCollection", "features": results }
//         });
//       }
//       map.current!.setLayoutProperty(
//         'outline-coastline',
//         'visibility',
//         'visible'
//       );

//     } else {
//       testDemoTsunami();
//       return;
//     }



//     if (!map.current) return;
//     // map.current.flyTo({
//     //   center: [coordinates[0], coordinates[1]],
//     //   zoom: 7,
//     //   essential: true
//     // });


//     blinkCoastline();
//     map.current!.moveLayer('outline-coastline');

//     // tgs.current.push(nt);
//     // setEvents(tgs.current);

//     console.log("WARNING TSUNAMI!!!");

//     var notif = new Audio(tsunamiAlertSound);
//     notif.loop = true;
//     notif.play();
//     setTimeout(() => {
//       var voice = new Audio("/voice/terdeteksi.wav");
//       voice.play();

//       setTimeout(() => {
//         var voice = new Audio("/voice/" + level.toLowerCase() + ".wav");
//         voice.play();
//         setTimeout(() => {
//           var voice = new Audio("/voice/potensi.wav");
//           voice.play();

//           if (level == "AWAS") {
//             setTimeout(() => {
//               var voice = new Audio("/voice/evakuasi.wav");
//               voice.play();
//               setTimeout(() => {
//                 notif.pause();
//               }, 2000);
//             }, 6000);
//           } else {
//             setTimeout(() => {
//               var voice = new Audio("/voice/informasi.wav");
//               voice.play();
//               setTimeout(() => {
//                 notif.pause();
//               }, 2000);
//             }, 6000);
//           }

//         }, 5000);
//       }, 5000);
//     }, 2000);


//     setTimeout(() => {
//       const tsunamiWarning: HTMLDivElement = document.querySelector("#tsunami-warning") as HTMLDivElement;
//       //find div inside bg-tsunami
//       if (tsunamiWarning) {
//         const divs = tsunamiWarning.querySelectorAll(".show-pop-up");
//         //loop and add class close-pop-up
//         divs.forEach((v) => {
//           v.classList.add("close-pop-up");
//         });
//       }
//     }, 9000);
//     setTimeout(() => {


//       const bgTsunami: HTMLDivElement = document.querySelector("#bg-tsunami .hex-bg") as HTMLDivElement;
//       //find div inside bg-tsunami
//       if (bgTsunami) {
//         const divs = bgTsunami.querySelectorAll("div");
//         //loop and add class close-pop-up
//         divs.forEach((v) => {
//           v.classList.add("close-pop-up");
//         });
//       }
//       setTimeout(() => {
//         setAlertTsunami(null);
//       }, 1000);
//       setInfoTsunami(tt);
//     }, 10000);
//   }

//   const socketInitializer = () => {
//     if (socket != null) return;
//     fetch('/api/socket')
//       .then(() => {

//         console.log('Socket is initializing');

//         socket = io();

//         socket.on('connect', () => {
//           console.log('connected');
//         });
//         socket.on('warning', (v: any) => {

//           warningHandler(v);
//         });
//         socket.on('message', (v: any) => {

//           console.log(v);
//         });

//       })
//       .catch((error) => {
//         console.error('Error initializing socket:', error);
//       });
//   };

//   const initWorker = () => {
//     worker.current = new Worker(
//       new URL('./worker.mjs', import.meta.url),
//       { type: 'module' }
//     );

//     worker.current.postMessage({ type: 'geoJsonData', data: geoJsonData.current, coastline: geoJsonCoastline.current });

//     worker.current.addEventListener('message', (event: any) => {
//       const data = event.data;
//       if (data.type == "checkMultiHighlightArea" && data.id == "wave") {
//         recieveWave(data);
//       }
//     });
//   }




//   useEffect(() => {
//     if (map.current) return () => { };
//     map.current = new mapboxgl.Map({
//       container: mapContainer.current!,
//       style: 'mapbox://styles/mapbox/dark-v11',
//       center: [lng, lat],
//       zoom: zoom,
//       maxZoom: 22,
//     });

//     map.current.on('load', () => {
//       // loadGeoJsonData();
//       loadGeoJsonCoastline();
//     });


//   });

//   useEffect(() => {

//     socketInitializer();

//     if (socket) return () => {
//       socket!.disconnect();
//     };

//   });



//   const sendWave = () => {
//     let t: any = [];
//     for (let i = 0; i < titikGempaBaru.current.length; i++) {
//       const v = titikGempaBaru.current[i];
//       if (!v.finish) {
//         t.push({
//           id: v.id,
//           center: v.center,
//           mag: v.mag,
//           depth: v.depth,
//           pWaveRadius: v.pWaveRadius,
//           sWaveRadius: v.sWaveRadius,
//           areaTerdampak: [],
//           message: v.description
//         })
//       }

//     }
//     if (t.length > 0) {
//       worker.current!.postMessage({ type: 'checkMultiHighlightArea', titikGempa: t, id: "wave" });
//     } else {
//       console.log("Not Send Wave");
//     }
//   }


//   const isEqual = (a, b) => a.id === b.id && a.name === b.name;


//   const recieveWave = async (data: any) => {
//     let alerts: InfoGempa[] = [];
//     for (let x = 0; x < data.titikGempa.length; x++) {
//       const tg = data.titikGempa[x];

//       const nig: InfoGempa = {
//         id: tg.id,
//         lng: parseFloat(tg.center[1]),
//         lat: parseFloat(tg.center[0]),
//         mag: tg.mag,
//         depth: tg.depth,
//         message: tg.message,
//         place: tg.place,
//         time: new Date().toLocaleString(),
//         listKotaTerdampak: []
//       };

//       for (let il = 0; il < tg.areaTerdampak.length; il++) {
//         const at = tg.areaTerdampak[il];
//         const dist = turf.distance(turf.point([tg.center[0], tg.center[1]]), turf.point([at.center[0], at.center[1]])) - (tg.sWaveRadius / 1000);
//         const time = Math.floor(dist / 3) * 1000;
//         nig.listKotaTerdampak!.push({
//           lng: at.center[1],
//           lat: at.center[0],
//           distance: dist,
//           name: at.alt_name,
//           hit: at.hit,
//           timeArrival: new Date(new Date().getTime() + time)
//         });

//       }

//       //sort nig.listKotaTerdampak by distance
//       nig.listKotaTerdampak!.sort((a, b) => a.distance - b.distance);

//       alerts.push(nig);
//     }

//     //get last alert
//     if (alerts.length > 0) {
//       const fig = alerts.slice(-1).pop()!;
//       setAlertGempaBumi(new TitikGempa(fig.id, fig));
//     } else {
//       setAlertGempaBumi(null);
//     }

//     const areas = data.area;

//     // Hapus data array objek yang sama
//     // const uniqueData = areas.filter((obj, index, self) =>
//     //   index === self.findIndex((t) => isEqual(t.properties.mhid, obj.properties.mhid))
//     // );

//     const uniqueData = areas;

//     for (let x = 0; x < uniqueData.length; x++) {
//       const element = uniqueData[x];
//       const p: number[] = turf.centroid(element).geometry.coordinates;
//       if (markerDaerahs.current.findIndex((el) => el[0] == p[0] && el[1] == p[1]) == -1) {
//         markerDaerahs.current.push([p[0], p[1]]);
//         const markerParent = document.createElement('div');
//         const markerEl = document.createElement('div');
//         markerEl.innerHTML = '<p class="uppercase">' + element.properties.alt_name + '</p>';
//         markerEl.classList.add('marker-daerah');
//         markerEl.classList.add('show-pop-up');
//         markerParent.appendChild(markerEl);
//         new mapboxgl.Marker(markerParent)
//           .setLngLat([p[0], p[1]])
//           .addTo(map.current!)

//       } else {

//         const index = kts.current.findIndex((el) => el.lng == p[0] && el.lat == p[1]);
//         if (index != -1) {

//           // kts.current[index].distance += 16;
//           // kts.current[index].hit = element.properties.hit;
//           // setKotaTerdampak([...kotaTerdampak, ...kts.current]);
//           // countdownTime();
//         }
//       }


//     }

//     if (map.current!.getSource('hightlight-wave')) {
//       (map.current!.getSource('hightlight-wave') as mapboxgl.GeoJSONSource).setData({ "type": "FeatureCollection", "features": uniqueData });
//     } else {
//       map.current!.addSource('hightlight-wave', {
//         'type': 'geojson',
//         'data': { "type": "FeatureCollection", "features": uniqueData }
//       });
//     }

//     if (!map.current!.getLayer('hightlight-wave-layer')) {
//       map.current!.addLayer({
//         'id': 'hightlight-wave-layer',
//         'type': 'fill',
//         'source': 'hightlight-wave',
//         'layout': {},
//         'paint': {
//           'fill-color': ['get', 'color'],
//           'fill-opacity': 0.8
//         }
//       });

//       map.current!.moveLayer('outline');
//       map.current!.moveLayer('outline-coastline');
//       for (let tg of tgs.current) {
//         if (map.current!.getLayer(tg.id)) {
//           map.current!.moveLayer(tg.id);
//         }
//       }
//     }

//     // if (map.current!.getSource('coastline')) {
//     //   (map.current!.getSource('coastline') as mapboxgl.GeoJSONSource).setData({ "type": "FeatureCollection", "features": data.line });
//     // } else {
//     //   map.current!.addSource('coastline', {
//     //     'type': 'geojson',
//     //     'data': { "type": "FeatureCollection", "features": data.line }
//     //   });
//     // }

//     sendWave();
//   }

//   const hoverWilayah = useRef<any>(null);

//   function loadGeoJsonCoastline() {
//     fetch('/geojson/garis_pantai.geojson')
//       .then(response => response.json())
//       .then(data => {
//         geoJsonCoastline.current = data;
//         if (!map.current!.getSource('coastline')) {
//           map.current!.addSource('coastline', {
//             type: 'geojson',
//             generateId: true,
//             data: data
//           });
//           map.current!.addLayer({
//             'id': 'outline-coastline',
//             'type': 'line',
//             'source': 'coastline',
//             'layout': {
//               'visibility': 'none',
//             },
//             'paint': {
//               'line-color': ['get', 'color'],
//               'line-width': 5,
//               'line-opacity': 1
//             }
//           });

//         }
//         loadGeoJsonData();
//       }).catch((error) => {
//         alert("Failed load geojson data : " + error);
//         console.error('Error fetching data:', error);
//       });
//   };

//   function loadGeoJsonData() {
//     fetch('/geojson/all_kabkota_ind_reduce.geojson')
//       .then(response => response.json())
//       .then(data => {
//         geoJsonData.current = data;
//         if (!map.current!.getSource('wilayah')) {
//           map.current!.addSource('wilayah', {
//             type: 'geojson',
//             generateId: true,
//             data: data
//           });
//           map.current!.addLayer({
//             'id': 'outline',
//             'type': 'line',
//             'source': 'wilayah',
//             'layout': {},
//             'paint': {
//               'line-color': '#807a72',
//               'line-width': 1,
//               'line-opacity': 0.7
//             }
//           });

//           map.current!.addLayer({
//             'id': 'wilayah-fill',
//             'type': 'fill',
//             'source': 'wilayah',
//             'layout': {

//             },
//             'paint': {
//               'fill-color': 'red',
//               'fill-opacity': [
//                 'case',
//                 ['boolean', ['feature-state', 'hover'], false],
//                 0.1,
//                 0
//               ],

//             }
//           });

//           // map.current!.on('mousemove', 'wilayah-fill', (e: any) => {
//           //   if (e.features.length > 0) {
//           //     if (hoverWilayah.current !== null) {
//           //       map.current!.setFeatureState(
//           //         { source: 'wilayah', id: hoverWilayah.current },
//           //         { hover: false }
//           //       );
//           //     }
//           //     hoverWilayah.current = e.features[0].id;
//           //     map.current!.setFeatureState(
//           //       { source: 'wilayah', id: hoverWilayah.current },
//           //       { hover: true }
//           //     );
//           //   }
//           // });

//           // map.current!.on('mouseleave', 'wilayah-fill', () => {
//           //   if (hoverWilayah.current !== null) {
//           //     map.current!.setFeatureState(
//           //       { source: 'wilayah', id: hoverWilayah.current },
//           //       { hover: false }
//           //     );
//           //   }
//           //   hoverWilayah.current = null;
//           // });
//         }
//         // getTitikStationJson();
//         getTitikGempaJson();
//         getTimezoneGeojson();
//         getFaultLineGeojson();
//         initWorker();
//       }).catch((error) => {
//         alert("Failed load geojson data : " + error);
//         console.error('Error fetching data:', error);
//       });
//   };

//   function getTitikStationJson() {
//     const url = "https://bmkg-content-inatews.storage.googleapis.com/sensor_seismic.json";
//     if (map.current) {
//       map.current.loadImage(
//         '/images/triangle-filled-svgrepo-com.png',
//         (error, image: any) => {
//           if (error) throw error;

//           // Add the image to the map style.
//           map.current!.addImage('station-icon', image);

//           // Add a data source containing one point feature.
//           map.current!.addSource('station', {
//             'type': 'geojson',
//             'data': url
//           });

//           // Add a layer to use the image to represent the data.
//           map.current!.addLayer({
//             'id': 'stations',
//             'type': 'symbol',
//             'source': 'station', // reference the data source
//             'layout': {
//               'icon-image': 'station-icon', // reference the image
//               'icon-size': 0.05
//             }
//           });

//           map.current!.on('click', 'stations', (e: any) => {
//             // Copy coordinates array.
//             const coordinates = e.features[0].geometry.coordinates.slice();
//             const d = e.features[0].properties;
//             const placeholder = document.createElement('div');
//             const root = createRoot(placeholder)
//             root.render(<Card title={
//               <p className='font-bold text-glow-red text-sm text-center' style={{
//                 color: "red"
//               }}>SENSOR SEISMIK</p>
//             } className='min-h-48 min-w-48 whitespace-pre-wrap' >
//               <div className='text-glow text-sm w-full ' style={{
//                 fontSize: "10px"
//               }}><table className='w-full'>
//                   <tbody>
//                     <tr>
//                       <td className='flex'>ID</td>
//                       <td className='text-right break-words pl-2'>{d.id}</td>
//                     </tr>
//                     <tr>
//                       <td className='flex'>Stakeholder</td>
//                       <td className='text-right break-words pl-2'>{d.stakeholder}</td>
//                     </tr>
//                     <tr>
//                       <td className='flex'>UPTBMKG</td>
//                       <td className='text-right break-words pl-2'>{d.uptbmkg}</td>
//                     </tr>
//                     <tr>
//                       <td className='flex'>Lokasi (Lat,Lng)</td>
//                       <td className='text-right break-words pl-2'>{coordinates[0]} , {coordinates[1]}</td>
//                     </tr>
//                   </tbody>
//                 </table>
//               </div>
//             </Card>);

//             new AnimatedPopup({
//               openingAnimation: {
//                 duration: 100,
//                 easing: 'easeOutSine',
//                 transform: 'scale'
//               },
//               closingAnimation: {
//                 duration: 100,
//                 easing: 'easeInOutSine',
//                 transform: 'scale'
//               }
//             }).setDOMContent(placeholder).setLngLat(coordinates).addTo(map.current!);
//           });

//           map.current!.on('mouseenter', 'stations', () => {
//             map.current!.getCanvas().style.cursor = 'pointer';
//           });

//           // Change it back to a pointer when it leaves.
//           map.current!.on('mouseleave', 'stations', () => {
//             map.current!.getCanvas().style.cursor = '';
//           });
//         }
//       );

//     }
//   }

//   function getTitikGempaJson() {
//     const url = "https://bmkg-content-inatews.storage.googleapis.com/gempaQL.json?t=" + new Date().getTime();
//     fetch(url)
//       .then(response => response.json())
//       .then((data) => {
//         geoJsonTitikGempa.current = data;
//         setTimeout(() => {
//           document.getElementById("loading-screen")!.style.display = "none";
//           setLoadingScreen(false);
//         }, 1000);
//         let ntg: TitikGempa[] = [];
//         for (let index = 0; index < data.features.length; index++) {
//           const feature = data.features[index];
//           const dt = DateTime.fromSQL(feature.properties.time, { zone: 'UTC' }).setZone("Asia/Jakarta");
//           const readAbleTime = dt.toISODate() + " " + dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)
//           ntg.push(new TitikGempa(feature.properties.id, {
//             id: feature.properties.id,
//             lng: feature.geometry.coordinates[0],
//             lat: feature.geometry.coordinates[1],
//             mag: feature.properties.mag,
//             depth: feature.properties.depth,
//             place: feature.properties.place,
//             time: readAbleTime
//           }));
//         }
//         tgs.current = ntg;
//         setEvents(tgs.current);
//         console.log('load titik gempa 1');
//         //check earthquakes layer
//         if (map.current!.getLayer('earthquakes-layer')) {
//           //update source
//           (map.current!.getSource('earthquakes') as mapboxgl.GeoJSONSource).setData(data);
//         } else {
//           //add source
//           map.current!.addSource('earthquakes', {
//             type: 'geojson',
//             data: data
//           });

//           map.current!.addLayer({
//             'id': 'earthquakes-layer',
//             'type': 'circle',
//             'source': 'earthquakes',
//             'paint': {
//               'circle-radius': ["to-number", ['get', 'mag']],
//               'circle-stroke-width': 2,

//               'circle-color': [
//                 "case",
//                 //depth <= 50 red, depth <= 100 orange, depth <= 250 yellow, depth <= 600 green, depth > 600 blue
//                 ['<=', ["to-number", ['get', 'depth']], 50],
//                 "red",
//                 ['<=', ["to-number", ['get', 'depth']], 100],
//                 "orange",
//                 ['<=', ["to-number", ['get', 'depth']], 250],
//                 "yellow",
//                 ['<=', ["to-number", ['get', 'depth']], 600],
//                 "green",
//                 "blue",
//               ],
//               'circle-stroke-color': 'white'
//             }
//           });
//         }

//         map.current!.on('click', 'earthquakes-layer', (e: any) => {
//           // Copy coordinates array.
//           const coordinates = e.features[0].geometry.coordinates.slice();
//           const d = e.features[0].properties;
//           const placeholder = document.createElement('div');
//           const root = createRoot(placeholder)
//           root.render(<Card title={
//             <div className='overflow-hidden'>
//               <div className='strip-wrapper'><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//               <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//                 <p className='p-1 bg-black font-bold text-xs text-glow'>GEMPA BUMI</p>
//               </div>
//             </div>
//           } className='min-h-48 min-w-48 whitespace-pre-wrap' >
//             <div className='text-glow text-sm w-full ' style={{
//               fontSize: "10px"
//             }}><table className='w-full'>
//                 <tbody>
//                   <tr>
//                     <td className='flex'>Magnitudo</td>
//                     <td className='text-right break-words pl-2'>{d.mag}</td>
//                   </tr>
//                   <tr>
//                     <td className='flex'>Kedalaman</td>
//                     <td className='text-right break-words pl-2'>{d.depth}</td>
//                   </tr>
//                   <tr>
//                     <td className='flex'>Waktu</td>
//                     <td className='text-right break-words pl-2'>{new Date(d.time!).toLocaleString()}</td>
//                   </tr>
//                   <tr>
//                     <td className='flex'>Lokasi (Lat,Lng)</td>
//                     <td className='text-right break-words pl-2'>{coordinates[0]} , {coordinates[1]}</td>
//                   </tr>
//                 </tbody>
//               </table>
//             </div>
//           </Card>);

//           new AnimatedPopup({
//             openingAnimation: {
//               duration: 100,
//               easing: 'easeOutSine',
//               transform: 'scale'
//             },
//             closingAnimation: {
//               duration: 100,
//               easing: 'easeInOutSine',
//               transform: 'scale'
//             }
//           }).setDOMContent(placeholder).setLngLat(coordinates).addTo(map.current!);
//         });

//         map.current!.on('mouseenter', 'earthquakes-layer', () => {
//           map.current!.getCanvas().style.cursor = 'pointer';
//         });

//         // Change it back to a pointer when it leaves.
//         map.current!.on('mouseleave', 'earthquakes-layer', () => {
//           map.current!.getCanvas().style.cursor = '';
//         });

//         console.log('load titik gempa 2');

//         getGempa();
//         getGempaKecil();

//       })
//       .catch((error) => {
//         console.error('Error initializing socket:', error);
//       });

//   }

//   const hoverTimezone = useRef<any>(null);
//   function getTimezoneGeojson() {
//     const url = "/geojson/timezones_wVVG8.geojson";
//     map.current!.addSource('timezone', {
//       'type': 'geojson',
//       'generateId': true,
//       'data': url
//     });

//     // Add a layer to use the image to represent the data.
//     // map.current!.addLayer({
//     //   'id': 'timezone-fill',
//     //   'type': 'fill',
//     //   'source': 'timezone', // reference the data source
//     //   'layout': {

//     //   },
//     //   'paint': {
//     //     // 'line-color': 'blue',
//     //     // 'line-width': 1
//     //     'fill-color': 'red',
//     //     'fill-opacity': [
//     //       'case',
//     //       ['boolean', ['feature-state', 'hover'], false],
//     //       0.1,
//     //       0
//     //     ],

//     //   }
//     // });

//     map.current!.addLayer({
//       'id': 'timezone-line',
//       'type': 'line',
//       'source': 'timezone', // reference the data source
//       'layout': {

//       },
//       'paint': {
//         'line-color': 'orange',
//         'line-width': 1,
//         'line-opacity': 0.5
//       }
//     });

//     const markerParent1 = document.createElement('div');
//     const gmt7Marker = createRoot(markerParent1)
//     gmt7Marker.render(
//       <div className='bordered p-1 text-time show-pop-up text-center'>
//         <p className="uppercase text-xl" style={{
//           lineHeight: "1rem"
//         }}>
//           <Jam timeZone="Asia/Jakarta" />
//         </p>
//         <p>WIB / GMT+7</p>
//       </div>
//     );

//     new mapboxgl.Marker(markerParent1)
//       .setLngLat([107.4999769225339, 3.4359354227361933])
//       .addTo(map.current!);


//     const markerParent2 = document.createElement('div');
//     const gmt8Marker = createRoot(markerParent2)
//     gmt8Marker.render(
//       <div className='bordered p-1 text-time show-pop-up text-center'>
//         <p className="uppercase text-xl" style={{
//           lineHeight: "1rem"
//         }}>
//           <Jam timeZone="Asia/Makassar" />
//         </p>
//         <p>WITA / GMT+8</p>
//       </div>
//     );
//     new mapboxgl.Marker(markerParent2)
//       .setLngLat([119.1174733337183, 3.4359354227361933])
//       .addTo(map.current!);

//     const markerParent3 = document.createElement('div');
//     const gmt9Marker = createRoot(markerParent3)
//     gmt9Marker.render(
//       <div className='bordered p-1 text-time show-pop-up text-center'>
//         <p className="uppercase text-xl" style={{
//           lineHeight: "1rem"
//         }}>
//           <Jam timeZone="Asia/Jayapura" />
//         </p>
//         <p className='text-xs'>WIT / GMT+9</p>
//       </div>
//     );
//     new mapboxgl.Marker(markerParent3)
//       .setLngLat([131.58387377752751, 3.4359354227361933])
//       .addTo(map.current!)

//     // map.current!.on('click', 'timezone-fill', (e: any) => {
//     //   console.log(e);
//     // });

//     // map.current!.on('mousemove', 'timezone-fill', (e: any) => {
//     //   if (e.features.length > 0) {
//     //     if (hoverTimezone.current !== null) {
//     //       map.current!.setFeatureState(
//     //         { source: 'timezone', id: hoverTimezone.current },
//     //         { hover: false }
//     //       );
//     //     }
//     //     hoverTimezone.current = e.features[0].id;
//     //     map.current!.setFeatureState(
//     //       { source: 'timezone', id: hoverTimezone.current },
//     //       { hover: true }
//     //     );
//     //   }
//     // });

//     // map.current!.on('mouseleave', 'timezone-fill', () => {
//     //   if (hoverTimezone.current !== null) {
//     //     map.current!.setFeatureState(
//     //       { source: 'timezone', id: hoverTimezone.current },
//     //       { hover: false }
//     //     );
//     //   }
//     //   hoverTimezone.current = null;
//     // });
//   }

//   function getFaultLineGeojson() {
//     const url = "/geojson/indo_faults_lines.geojson";
//     map.current!.addSource('indo_faults_lines', {
//       'type': 'geojson',
//       'generateId': true,
//       'data': url
//     });

//     // Add a layer to use the image to represent the data.
//     map.current!.addLayer({
//       'id': 'indo_faults_line_layer',
//       'type': 'line',
//       'source': 'indo_faults_lines', // reference the data source
//       'layout': {

//       },
//       'paint': {
//         'line-color': 'red',
//         'line-width': 1,
//         'line-opacity': 0.5
//         // 'fill-color': 'red',
//         // 'fill-opacity': [
//         //   'case',
//         //   ['boolean', ['feature-state', 'hover'], false],
//         //   0.1,
//         //   0
//         // ],

//       }
//     });



//   }

//   function getGempa() {
//     if (lastGempaId.current) {
//       return
//     }
//     console.log("getGempa");
//     const url = "https://bmkg-content-inatews.storage.googleapis.com/datagempa.json?t=" + new Date().getTime();
//     fetch(url)
//       .then(response => response.json())
//       .then((data) => {
//         const coordinates = data.info.point.coordinates.split(",");
//         lastGempaId.current = data.identifier;
//         const sentTime = DateTime.fromISO(data.sent.replace("WIB", ""), { zone: "Asia/Jakarta" });
//         const currentTime = DateTime.now().setZone("Asia/Jakarta");
//         const readAbleTime = sentTime.toISODate() + " " + sentTime.toLocaleString(DateTime.TIME_24_WITH_SECONDS)

//         const nig: InfoGempa = {
//           id: data.identifier,
//           lng: parseFloat(coordinates[0]),
//           lat: parseFloat(coordinates[1]),
//           mag: data.info.magnitude || 9.0,
//           depth: data.info.depth || "10 Km",
//           message: data.info.description,
//           time: readAbleTime
//         };

//         const cek = tgs.current.find((v) => v.id == data.identifier);
//         if ((currentTime.toMillis() - sentTime.toMillis()) < 600000) {
//           warningHandler({
//             id: data.identifier,
//             lng: parseFloat(coordinates[0]),
//             lat: parseFloat(coordinates[1]),
//             mag: parseFloat(data.info.magnitude),
//             depth: data.info.depth,
//             message: data.info.description + "\n" + data.info.instruction,
//             time: readAbleTime,
//           });
//           const ntg = new TitikGempa(nig.id, nig, {
//             map: map.current!,
//             showMarker: true
//           });

//           setTimeout(() => {

//             // setAlertGempaBumi(ntg);
//             setGempaDirasakan(ntg);
//           }, 6000);
//         } else if (!cek) {
//           tgs.current.push(new TitikGempa(nig.id, nig));
//           //sort by time
//           tgs.current.sort(function (a: any, b: any) {
//             return new Date(b.time).getTime() - new Date(a.time).getTime();
//           })
//           geoJsonTitikGempa.current.features.push({
//             "geometry": {
//               "type": "Point",
//               "coordinates": [
//                 nig.lng,
//                 nig.lat,
//                 1
//               ]
//             },
//             "type": "Feature",
//             "properties": {
//               id: nig.id,
//               depth: parseFloat(nig.depth.replaceAll(" Km", "")).toFixed(2),
//               mag: nig.mag,
//               time: nig.time,
//               place: nig.place,
//             }
//           });
//           (map.current!.getSource('earthquakes') as mapboxgl.GeoJSONSource).setData(geoJsonTitikGempa.current);
//           setEvents(tgs.current);

//         }

//         const ntg = new TitikGempa(nig.id, nig, {
//           map: map.current!
//         });
//         setGempaDirasakan(ntg);

//         // getGempaPeriodik();
//       })
//       .catch((error) => {
//         console.error('Error initializing socket:', error);
//       });


//   }

//   function getGempaKecil() {
//     if (lastGempaKecilId.current) {
//       return;
//     }
//     console.log("getGempaKecil");
//     const url = "https://bmkg-content-inatews.storage.googleapis.com/lastQL.json?t=" + new Date().getTime();
//     fetch(url)
//       .then(response => response.json())
//       .then((data) => {
//         if (data.features.length > 0) {
//           const feature = data.features[0];
//           lastGempaKecilId.current = feature.properties.id;

//           const sentTime = DateTime.fromSQL(feature.properties.time, { zone: 'UTC' });
//           const currentTime = DateTime.now().setZone("UTC");

//           const msg = `${feature.properties.place}
// Magnitudo : ${feature.properties.mag}
// Kedalaman : ${feature.properties.depth}
// Lokasi (Lat,Lng) : 
// ${feature.geometry.coordinates[0]} , ${feature.geometry.coordinates[1]}`;

//           const dt = DateTime.fromSQL(feature.properties.time, { zone: 'UTC' }).setZone("Asia/Jakarta");
//           const readAbleTime = dt.toISODate() + " " + dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)
//           const nig: InfoGempa = {
//             id: feature.properties.id,
//             lng: parseFloat(feature.geometry.coordinates[0]),
//             lat: parseFloat(feature.geometry.coordinates[1]),
//             mag: parseFloat(feature.properties.mag),
//             depth: feature.properties.depth || "10 Km",
//             message: msg,
//             place: feature.properties.place,
//             time: readAbleTime
//           };




//           //if sent time is less than 10 minutes
//           if ((currentTime.toMillis() - sentTime.toMillis()) < 600000) {

//             if (map.current) {
//               var notif = new Audio(smallEarthQuakeSound);
//               notif.play();
//               // map.current!.flyTo({
//               //   center: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
//               //   zoom: 7,
//               //   essential: true
//               // });

//               const tg = new TitikGempa(feature.properties.id, nig, {
//                 pWaveSpeed: 6000,
//                 sWaveSpeed: 3000,
//                 map: map.current!,
//                 description: msg,
//                 zoomToPosition: true,
//                 showMarker: true,
//                 showPopup: true,
//                 showPopUpInSecond: 1,
//               });

//               setGempaTerakhir(tg);
//               setAlertGempaBumi(new TitikGempa(feature.properties.id, nig));

//             }




//           } else {
//             setGempaTerakhir(new TitikGempa(feature.properties.id, nig));
//           }

//           const cek = tgs.current.find((v) => v.id == feature.properties.id);
//           if (!cek) {

//             tgs.current.unshift(new TitikGempa(feature.properties.id, nig));
//             geoJsonTitikGempa.current.features.push(feature);
//             (map.current!.getSource('earthquakes') as mapboxgl.GeoJSONSource).setData(geoJsonTitikGempa.current);


//           }


//           setEvents(tgs.current);




//         }
//         getGempaPeriodik();
//       })
//       .catch((error) => {
//         console.error('Error initializing socket:', error);
//       });
//   }

//   function getGempaPeriodik() {
//     setInterval(() => {
//       const url = "https://bmkg-content-inatews.storage.googleapis.com/datagempa.json?t=" + new Date().getTime()
//       //await fetch
//       fetch(url)
//         .then(response => response.json())
//         .then((data) => {
//           if (lastGempaId.current != data.identifier) {
//             lastGempaId.current = data.identifier;
//             const coordinates = data.info.point.coordinates.split(",");
//             const sentTime = DateTime.fromISO(data.sent.replace("WIB", ""), { zone: "Asia/Jakarta" });
//             const readAbleTime = sentTime.toISODate() + " " + sentTime.toLocaleString(DateTime.TIME_24_WITH_SECONDS);

//             warningHandler({
//               id: data.identifier,
//               lng: parseFloat(coordinates[0]),
//               lat: parseFloat(coordinates[1]),
//               mag: parseFloat(parseFloat(data.info.magnitude).toFixed(1)),
//               depth: data.info.depth,
//               message: data.info.description + "\n" + data.info.instruction,
//               time: readAbleTime
//             });

//             if (data.info.wzarea != undefined && data.info.wzarea.length > 0) {
//               if (data.info.subject == "Warning Tsunami PD-4") {
//                 //delete outline-costline layer
//                 try {
//                   map.current!.removeLayer('outline-coastline');
//                   map.current!.removeLayer('outline');
//                 } catch (error) {

//                 }
//               } else if (data.info.subject.includes("Warning Tsunami")) {
//                 warningTsunamiHandler(data.info);
//               }

//             }

//           }
//         })
//         .catch((error) => {
//           console.error('Error initializing socket:', error);
//         });
//     }, 5000);

//     setInterval(() => {
//       const url = "https://bmkg-content-inatews.storage.googleapis.com/lastQL.json?t=" + new Date().getTime();
//       fetch(url)
//         .then(response => response.json())
//         .then((data) => {
//           const feature = data.features[0];
//           const msg = `${feature.properties.place}
// Magnitudo : ${feature.properties.mag}
// Kedalaman : ${feature.properties.depth}
// Lokasi (Lat,Lng) : 
// ${feature.geometry.coordinates[0]} , ${feature.geometry.coordinates[1]}`;

//           const dt = DateTime.fromSQL(feature.properties.time, { zone: 'UTC' }).setZone("Asia/Jakarta");
//           const readAbleTime = dt.toISODate() + " " + dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)
//           const nig: InfoGempa = {
//             id: feature.properties.id,
//             lng: parseFloat(feature.geometry.coordinates[0]),
//             lat: parseFloat(feature.geometry.coordinates[1]),
//             mag: parseFloat(feature.properties.mag),
//             depth: feature.properties.depth || "10 Km",
//             message: msg,
//             place: feature.properties.place,
//             time: readAbleTime
//           };
//           if (lastGempaKecilId.current != feature.properties.id) {
//             lastGempaKecilId.current = feature.properties.id;
//             var notif = new Audio(smallEarthQuakeSound);
//             notif.play();
//             if (!map.current) return;


//             if (gempaTerakhir != null && gempaTerakhir.setting != null && gempaTerakhir.setting.map != null) {
//               gempaTerakhir.removeAllRender();
//               gempaTerakhir.removeMarker();
//               if (tgs.current.length > 0) {
//                 const ig = tgs.current[0].infoGempa
//                 geoJsonTitikGempa.current.features.push({
//                   "geometry": {
//                     "type": "Point",
//                     "coordinates": [
//                       ig.lng,
//                       ig.lat,
//                       1
//                     ]
//                   },
//                   "type": "Feature",
//                   "properties": {
//                     id: ig.id,
//                     depth: ig.depth,
//                     mag: ig.mag,
//                     time: ig.time,
//                     place: ig.place,
//                   }
//                 });
//                 (map.current!.getSource('earthquakes') as mapboxgl.GeoJSONSource).setData(geoJsonTitikGempa.current);
//               }
//             }

//             tgs.current.push(new TitikGempa(nig.id, nig, {
//               map: map.current!,
//               zoomToPosition: true,
//               showMarker: true,
//               showPopup: true,
//               showPopUpInSecond: 1
//             }))
//             tgs.current.sort(function (a: any, b: any) {
//               return new Date(b.time).getTime() - new Date(a.time).getTime();
//             });
//             setEvents(tgs.current);
//             setAlertGempaBumi(new TitikGempa(nig.id, nig))

//             const tg = new TitikGempa(lastGempaKecilId.current, nig, {
//               pWaveSpeed: 6000,
//               sWaveSpeed: 3000,
//               map: map.current!,
//               description: msg,
//             });

//             // titikGempaKecil.current = tg;
//             setGempaTerakhir(new TitikGempa(nig.id, nig));
//           } else {
//             const cek = tgs.current.find((v) => v.id == feature.properties.id);
//             if (cek && cek.infoGempa.mag != parseFloat(feature.properties.mag)) {
//               console.log(cek.infoGempa.mag, parseFloat(feature.properties.mag))
//               setGempaTerakhir(new TitikGempa(nig.id, nig));
//               setAlertGempaBumi(new TitikGempa(nig.id, nig));
//               const indextgs = tgs.current.findIndex((v) => v.id == feature.properties.id);
//               tgs.current[indextgs].infoGempa = nig;

//             }
//           }


//         })
//         .catch((error) => {
//           console.error('Error initializing socket:', error);
//         });
//     }, 5000);
//   }

//   const selectedPopup = useRef<any>(null);

//   function selectEvent(d: InfoGempa) {
//     setDetailInfoGempa(d);
//     if (selectedPopup.current) {
//       selectedPopup.current.remove();
//     }

//     map.current!.flyTo({
//       center: [d.lng, d.lat],
//       zoom: 6,
//       essential: true
//     });
//     const placeholder = document.createElement('div');
//     const root = createRoot(placeholder)
//     root.render(<Card title={
//       <div className='overflow-hidden'>
//         <div className='strip-wrapper'><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//         <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//           <p className='p-1 bg-black font-bold text-xs text-glow'>GEMPA BUMI</p>
//         </div>
//       </div>
//     } className='min-h-48 min-w-48 whitespace-pre-wrap ' >
//       <ul className='text-glow'>
//         <li>
//           Magnitudo : {d.mag}
//         </li>
//         <li>
//           Kedalaman : {d.depth}
//         </li>
//         <li>
//           Waktu : {new Date(d.time!).toLocaleString()}
//         </li>
//         <li>
//           Lokasi (Lat,Lng) : <br />{d.lat} , {d.lng}
//         </li>
//       </ul>
//     </Card>);

//     selectedPopup.current = new AnimatedPopup({
//       closeOnClick: false,
//       openingAnimation: {
//         duration: 100,
//         easing: 'easeOutSine',
//         transform: 'scale'
//       },
//       closingAnimation: {
//         duration: 100,
//         easing: 'easeInOutSine',
//         transform: 'scale'
//       }
//     }).setDOMContent(placeholder).setLngLat([d.lng, d.lat]).addTo(map.current!);
//     const cekTable = document.querySelector("#histori_tabel tbody");
//     if (cekTable) {
//       cekTable.innerHTML = "<tr></tr>";
//     }
//     setTimeout(() => {
//       readTextFile("https://bmkg-content-inatews.storage.googleapis.com/history." + d.id + ".txt");
//     }, 500);
//   }

//   function testDemoGempa() {
//     if (geoJsonData.current == null) {
//       alert("Wait loading geojson");
//       return;
//     };
//     const bbox = turf.bbox(geoJsonData.current);
//     const randomPosition = turf.randomPosition(bbox);
//     const mag = (Math.random() * (10 - 5) + 5).toFixed(1);
//     const depth = (Math.random() * 20).toFixed(1) + " Km";
//     const message = "Gempa Bumi Test Pada Lokasi : Lat : " + randomPosition[1].toFixed(4) + " Lng : " + randomPosition[0].toFixed(4) + " Magnitudo : " + mag + " Kedalaman : " + depth;
//     const id = `tg-${new Date().getTime()}`;

//     const dt = DateTime.now();
//     const readAbleTime = dt.toISODate() + " " + dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)
//     const nig: InfoGempa = {
//       id: id,
//       lng: randomPosition[0].toFixed(4),
//       lat: randomPosition[1].toFixed(4),
//       mag: parseFloat(mag),
//       depth: depth || "10 Km",
//       message: message,
//       time: readAbleTime
//     };


//     warningHandler(nig);

//     // setTimeout(() => {
//     //   setInfoGempaDirasakanTerakhir(nig);
//     // }, 6000);

//   }

//   function testDemoTsunami() {
//     const url = "https://bmkg-content-inatews.storage.googleapis.com/last30tsunamievent.xml";
//     //fecth and parse xml
//     fetch(url)
//       .then(response => response.text())
//       .then(data => {
//         const parser = new XMLParser();
//         let jObj = parser.parse(data);
//         var infos = jObj.alert.info;
//         infos = infos.filter((v) => v.wzarea != undefined)
//         var randInfo = infos[(Math.random() * infos.length) | 0]

//         warningTsunamiHandler(randInfo);

//       }).catch((error) => {
//         alert("Failed load geojson data : " + error);
//         console.error('Error fetching data:', error);
//       });

//     //warningTsunamiHandler(null);
//   }

//   function readTextFile(e: string) {

//     var t = new XMLHttpRequest;
//     t.open("GET", e, !1), t.onreadystatechange = function () {
//       if (4 === t.readyState && (200 === t.status || 0 == t.status)) {
//         let u = t.responseText.split("\n");
//         var table = document.getElementById("histori_tabel") as HTMLTableElement;
//         //clear tbody

//         let T = u.length - 1;
//         for (let t = 1; t < T; t++) {
//           let T = u[t].split("|");
//           var n = table.insertRow(t),
//             a = n.insertCell(0),
//             l = n.insertCell(1),
//             s = n.insertCell(2),
//             i = n.insertCell(3),
//             o = n.insertCell(4),
//             r = n.insertCell(5),
//             d = n.insertCell(6),
//             m = n.insertCell(7),
//             g = n.insertCell(8),
//             c = n.insertCell(9);
//           a.innerHTML = T[0], l.innerHTML = T[1], s.innerHTML = T[2], i.innerHTML = T[3], o.innerHTML = T[4], r.innerHTML = T[5], d.innerHTML = T[6], m.innerHTML = T[7], g.innerHTML = T[8], c.innerHTML = T[9]
//         }
//       }
//     }, t.send(null)
//   }

//   function generateDiv(max) {
//     let arrayDivs: any = [];
//     for (let index = 0; index < max; index++) {
//       arrayDivs.push(<div key={index} style={{
//         animationDelay: `${index * 0.001}s`
//       }}>
//         <img src="/images/warning_hex_red.png" alt="" />
//       </div>);
//     }

//     return arrayDivs;
//   }


//   return (
//     <div>
//       <audio id="danger" className='hidden'>
//         <source src={dangerSound} type="audio/mp3" />
//       </audio>

//       <div ref={mapContainer} className="w-full h-screen" />

//       {!loadingScreen && alertGempaBumi &&
//         <Card title={
//           <div className='overflow-hidden'>
//             <div className='strip-wrapper '><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//             <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//               <p className='p-1 bg-black font-bold text-xs text-glow'>GEMPA BUMI</p>
//             </div>
//           </div>
//         } className='hidden md:block show-pop-up  fixed top-12 md:top-6 left-0 card-float right-0 md:left-6 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6'>
//           <div className='flex flex-col w-full justify-center items-center text-glow text-sm ' style={{
//             fontSize: "10px"
//           }}>
//             <div className='w-full flex   gap-2' >
//               <div>
//                 <div id="internal" className="label bordered flex mb-2 w-full lg:w-32">
//                   <div className="flex flex-col items-center p-1 ">
//                     <div className="text -characters">{alertGempaBumi.readableMag}</div>
//                     <div className="text">MAG</div>
//                   </div>
//                   <div className="decal -blink -striped"></div>
//                 </div>
//                 <p className='text-glow font-bold'>DEPTH : {alertGempaBumi.readableDepth} KM</p>
//               </div>
//               <div className="bordered p-2 w-full">
//                 <table className='w-full'>
//                   <tbody>

//                     <tr>
//                       <td className='text-left'>TIME</td>
//                       <td className='text-right'>{alertGempaBumi.readableTime} WIB</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left'>MAG</td>
//                       <td className='text-right'>{alertGempaBumi.mag}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left'>DEPTH</td>
//                       <td className='text-right'>{alertGempaBumi.depth}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left'>LAT</td>
//                       <td className='text-right'>{alertGempaBumi.infoGempa.lat}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left'>LNG</td>
//                       <td className='text-right'>{alertGempaBumi.infoGempa.lng}</td>
//                     </tr>
//                   </tbody>
//                 </table>
//               </div>

//             </div>
//             <div className='mt-2 bordered w-full'>
//               <p className='text-glow p-2 break-words'>{alertGempaBumi.infoGempa.message}</p>
//             </div>
//           </div>
//           {alertGempaBumi.mag >= 5 && <div className='red-bordered p-2 overflow-y-auto custom-scrollbar mt-2' style={{
//             maxHeight: "20vh",
//           }}>
//             <ul>
//               {alertGempaBumi.infoGempa.listKotaTerdampak && alertGempaBumi.infoGempa.listKotaTerdampak.map((kota, i) => {
//                 if (kota.hit) {
//                   return <li key={i} className='flex flex-grow justify-between items-center mb-2 item-daerah danger slide-in-left'>
//                     <ItemKotaTerdampak kota={kota} />
//                   </li>
//                 } else {
//                   return <li key={i} className='flex flex-grow justify-between items-center mb-2 item-daerah slide-in-left'>
//                     <ItemKotaTerdampak kota={kota} />
//                   </li>
//                 }
//               })}
//             </ul>
//           </div>}
//         </Card>}

//       {!loadingScreen && infoTsunami &&
//         <Card title={
//           <div className='overflow-hidden'>
//             <div className='strip-wrapper '><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//             <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//               <p className='p-1 bg-black font-bold text-xs text-glow'>PERINGATAN TSUNAMI</p>
//             </div>
//           </div>
//         }
//           footer={
//             <div className='flex justify-center w-full' >
//               <span >{infoTsunami.infoTsunami.level}</span>
//             </div>
//           }
//           className='hidden md:block show-pop-up  fixed top-12 md:top-6 left-0 card-float right-0 md:left-6 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6'>
//           <div className='flex flex-col w-full justify-center items-center text-glow text-sm ' style={{
//             fontSize: "10px"
//           }}>

//             <div className='mt-2 bordered w-full'>
//               <p className='text-glow p-2 break-words'>{infoTsunami.infoTsunami.message}</p>
//             </div>
//           </div>
//           {(infoTsunami.infoTsunami.level?.includes("PD-1") || infoTsunami.infoTsunami.level?.includes("PD-2")) && <div className='red-bordered p-2 overflow-y-auto custom-scrollbar mt-2' style={{
//             maxHeight: "20vh",
//           }}>
//             <ul>
//               {infoTsunami.infoTsunami.listKotaTerdampak && infoTsunami.infoTsunami.listKotaTerdampak.map((kota, i) => {
//                 return <li key={i} className='flex flex-grow justify-between items-center mb-2 item-daerah slide-in-left'>
//                   <ItemKotaTerdampak kota={kota} />
//                 </li>
//               })}
//             </ul>
//           </div>}
//         </Card>}

//       <div className='fixed  top-12 w-28 md:bottom-auto md:top-2 left-0 right-0 m-auto flex flex-col justify-center items-center gap-2'>
//         <button className=' bordered w-24 text-sm text-center bg-black cursor-pointer' onClick={() => {
//           testDemoGempa();
//         }}>
//           TEST GEMPA
//         </button>

//         <button className=' bordered w-28 text-sm text-center bg-black cursor-pointer' onClick={() => {
//           testDemoTsunami();
//         }}>
//           TEST TSUNAMI
//         </button>
//       </div>



//       {!loadingScreen && <Card title={
//         <p className='font-bold text-glow-red text-sm text-center' style={{
//           color: "red"
//         }}>EVENT LOG</p>
//       } className=' fixed right-0  md:right-6 top-1 md:top-6 card-float md:w-1/3 lg:w-1/5 show-pop-up'>
//         <ul >
//           {events.map((v: TitikGempa, i) => {

//             return <li key={i}
//               onClick={() => {
//                 selectEvent(v.infoGempa);

//               }}
//               className='flex flex-col mb-2 list-event cursor-pointer  slide-in-left' style={{
//                 animationDelay: `${i * 0.01}s`,
//                 transform: 'translateX(-110%)'
//               }}>
//               <span className='block mb-1' style={{
//                 fontSize: "11px"
//               }}>{v.infoGempa.time} WIB</span>
//               <div className=' bordered p-2 overflow-hidden' style={{
//                 fontSize: "12px"
//               }}>
//                 {v.readableMag} M - {v.infoGempa.place || "uknown"}
//               </div>
//             </li>
//           })}
//         </ul>

//       </Card>}





//       {!loadingScreen && gempaTerakhir && <Card title={
//         <div className='w-full flex justify-center text-center'>
//           <p className='font-bold text-glow-red text-sm '>
//             GEMPA TERDETEKSI TERAKHIR
//           </p>

//         </div>
//       }
//         footer={
//           <div className='flex justify-center w-full  cursor-pointer' onClick={() => {
//             selectEvent(gempaTerakhir.infoGempa);
//           }}>
//             <span ><IoLocationSharp /></span>
//           </div>
//         }

//         className='hidden md:block show-pop-up fixed bottom-28 md:bottom-6 card-float left-1 right-1 m-auto md:w-1/4 lg:w-1/6'>
//         <div className='text-glow text-sm w-full ' style={{
//           fontSize: "10px"
//         }}>
//           <table className='w-full'>
//             <tbody>
//               <tr>
//                 <td className='text-left'>PLACE</td>
//                 <td className='text-right'>{gempaTerakhir.infoGempa.place}</td>
//               </tr>
//               <tr>
//                 <td className='text-left'>TIME</td>
//                 <td className='text-right' >{gempaTerakhir.readableTime} WIB</td>
//               </tr>
//               <tr>
//                 <td className='text-left'>MAG</td>
//                 <td className='text-right'>{gempaTerakhir.infoGempa.mag}</td>
//               </tr>
//               <tr>
//                 <td className='text-left'>DEPTH</td>
//                 <td className='text-right'>{gempaTerakhir.readableDepth} KM</td>
//               </tr>
//               <tr>
//                 <td className='text-left'>LAT</td>
//                 <td className='text-right'>{gempaTerakhir.infoGempa.lat}</td>
//               </tr>
//               <tr>
//                 <td className='text-left'>LNG</td>
//                 <td className='text-right'>{gempaTerakhir.infoGempa.lng}</td>
//               </tr>
//             </tbody>
//           </table>
//         </div>
//       </Card>}

//       {!loadingScreen && gempaDirasakan && <Card title={
//         <div className='w-full flex justify-center text-center'>
//           <p className='font-bold text-glow-red text-sm '>
//             GEMPA DIRASAKAN TERAKHIR
//           </p>

//         </div>
//       }
//         footer={
//           <div className='flex justify-center w-full cursor-pointer' onClick={() => {
//             selectEvent(gempaDirasakan.infoGempa);
//           }}>
//             <span ><IoLocationSharp /></span>
//           </div>
//         }

//         className='hidden md:block show-pop-up fixed bottom-10 left-1 right-1 md:right-0 md:left-6 card-float  md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6'>
//         <div className='flex flex-col w-full justify-center items-center text-glow text-sm ' style={{
//           fontSize: "10px"
//         }}>
//           <div className='w-full flex   gap-2' >
//             <div>
//               <div id="internal" className="label bordered flex mb-2 w-full lg:w-32">
//                 <div className="flex flex-col items-center p-1 ">
//                   <div className="text -characters">{gempaDirasakan.readableMag}</div>
//                   <div className="text">MAG</div>
//                 </div>
//                 <div className="decal -blink -striped"></div>
//               </div>
//               <p className='text-glow font-bold'>DEPTH : {gempaDirasakan.readableDepth} KM</p>
//             </div>
//             <div className="bordered p-2 w-full">
//               <table className='w-full'>
//                 <tbody>

//                   <tr>
//                     <td className='text-left'>TIME</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.time} WIB</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>MAG</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.mag}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>DEPTH</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.depth}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>LAT</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.lat}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>LNG</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.lng}</td>
//                   </tr>
//                 </tbody>
//               </table>
//             </div>

//           </div>
//           <div className='mt-2 bordered'>
//             <p className='text-glow p-2 break-words'>{gempaDirasakan.infoGempa.message}</p>
//           </div>
//         </div>
//       </Card>}

//       {!loadingScreen && detailInfoGempa && <Card title={
//         <div className='w-full flex justify-between'>
//           <p className='font-bold text-glow-red text-sm'>
//             DETAIL EVENT
//           </p>
//           <button onClick={() => {
//             if (selectedPopup.current) {
//               selectedPopup.current.remove();
//             }
//             setDetailInfoGempa(null);
//           }}>X</button>
//         </div>
//       }
//         className='right-6 bottom-10 md:bottom-6 fixed  card-float  show-pop-up '>
//         <div className='text-glow text-sm w-full ' style={{
//           fontSize: "10px"
//         }}>
//           <div className='flex flex-col w-full gap-2'>
//             {/* <img src={"https://bmkg-content-inatews.storage.googleapis.com/" + (detailInfoGempa.time?.replaceAll("-", "").replaceAll(" ", "").replaceAll(":", "")) + ".mmi.jpg"} alt="" className='w-52' /> */}

//             <div>
//               <div className='bordered p-2'>
//                 <table className='w-full'>
//                   <tbody>
//                     <tr>
//                       <td className='text-left flex'>PLACE</td>
//                       <td className='text-right break-words pl-2'>{detailInfoGempa.place}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left flex'>TIME</td>
//                       <td className='text-right break-words pl-2' data-time={detailInfoGempa.time}>{detailInfoGempa.time} WIB</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left flex'>MAG</td>
//                       <td className='text-right break-words pl-2'>{detailInfoGempa.mag}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left flex'>DEPTH</td>
//                       <td className='text-right break-words pl-2'>{parseFloat(detailInfoGempa.depth.replace(" Km", "")).toFixed(2)} KM</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left flex'>LAT</td>
//                       <td className='text-right break-words pl-2'>{detailInfoGempa.lat}</td>
//                     </tr>
//                     <tr>
//                       <td className='text-left flex'>LNG</td>
//                       <td className='text-right break-words pl-2'>{detailInfoGempa.lng}</td>
//                     </tr>
//                   </tbody>
//                 </table>
//               </div>
//             </div>

//             <div className='bordered p-2'>
//               <table id='histori_tabel' style={{
//                 fontSize: "10px"
//               }} className='w-full text-right'>
//                 <thead>
//                   <tr>
//                     <th className='p-1'>
//                       Time(UTC)
//                     </th>
//                     <th className='p-1'>
//                       +OT(min)
//                     </th>
//                     <th className='p-1'>
//                       Lat
//                     </th>
//                     <th className='p-1'>
//                       Lng
//                     </th>
//                     <th className='p-1'>
//                       Depth
//                     </th>
//                     <th className='p-1'>
//                       Phase
//                     </th>
//                     <th className='p-1'>
//                       MagType
//                     </th>
//                     <th className='p-1'>
//                       Mag
//                     </th>
//                     <th className='p-1'>
//                       MagCount
//                     </th>
//                     <th className='p-1'>
//                       Status
//                     </th>
//                   </tr>
//                 </thead>
//                 <tbody>
//                   <tr>
//                     <td></td>
//                   </tr>
//                 </tbody>
//               </table>
//             </div>
//           </div>

//         </div>

//       </Card>}

//       {!loadingScreen && alertGempaBumi && gempaDirasakan && <Card title={
//         <div className='overflow-hidden'>
//           <div className='strip-wrapper '><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//           <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//             <p className='p-1 bg-black font-bold text-xs text-glow'>GEMPA BUMI</p>
//           </div>
//         </div>
//       } className='block md:hidden show-pop-up  fixed bottom-10 md:top-6 left-0 card-warning right-0 md:left-6 md:w-1/4 lg:w-1/5'>
//         <div className='flex flex-col w-full justify-center items-center text-glow text-sm ' style={{
//           fontSize: "10px"
//         }}>
//           <div className='w-full flex   gap-2' >
//             <div>
//               <div id="internal" className="label bordered flex mb-2 w-full lg:w-32">
//                 <div className="flex flex-col items-center p-1 ">
//                   <div className="text -characters">{gempaDirasakan.readableMag}</div>
//                   <div className="text">MAG</div>
//                 </div>
//                 <div className="decal -blink -striped"></div>
//               </div>
//               <p className='text-glow font-bold'>DEPTH : {gempaDirasakan.readableDepth} KM</p>
//             </div>
//             <div className="bordered p-2 w-full">
//               <table className='w-full'>
//                 <tbody>

//                   <tr>
//                     <td className='text-left'>TIME</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.time} WIB</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>MAG</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.mag}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>DEPTH</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.depth}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>LAT</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.lat}</td>
//                   </tr>
//                   <tr>
//                     <td className='text-left'>LNG</td>
//                     <td className='text-right'>{gempaDirasakan.infoGempa.lng}</td>
//                   </tr>
//                 </tbody>
//               </table>
//             </div>

//           </div>
//           <div className='mt-2 bordered'>
//             <p className='text-glow p-2 break-words'>{gempaDirasakan.infoGempa.message}</p>
//           </div>
//         </div>

//       </Card>}

//       {!loadingScreen && alertGempaBumis.map((v, i) => {
//         return <div className='z-50' key={i}>
//           <GempaBumiAlert
//             key={i}
//             props={
//               {
//                 magnitudo: v.mag || 9.0,
//                 kedalaman: v.depth || '0 km',
//                 show: true,
//                 closeInSecond: 6
//               }
//             } />
//         </div>
//       })}

//       {/* {!loadingScreen && alertGempaBumi && <GempaBumiAlert key={alertGempaBumi.id}
//             props={
//               {
//                 magnitudo: alertGempaBumi.mag || 9.0,
//                 kedalaman: alertGempaBumi.depth || '0 km',
//                 show: true,
//                 closeInSecond: 6
//               }
//             } />} */}


//       <div className="fixed bottom-2 md:bottom-1 m-auto right-0 md:right-72 left-0 md:left-auto flex justify-center items-center gap-2 w-36  md:w-auto">
//         <a title="Link Github" href="https://inatews.bmkg.go.id" className='flex gap-1 text-center justify-center  m-auto'>
//           <div className='bmkg-icon'></div>
//           <span>BMKG</span>
//         </a>
//         <a title="Link Github" href="https://github.com/bagusindrayana/ews-concept" className='flex gap-1 text-center justify-center  m-auto'>
//           <div className='github-icon'></div>
//           <span>Github</span>
//         </a>

//       </div>

//       {!loadingScreen && alertTsunami && <div className='fixed m-auto top-0 left-0 right-0 bottom-0 flex justify-center' id="tsunami-warning">

//         <div className='w-full h-full absolute -rotate-90'>
//           <div className="main " id='bg-tsunami'>
//             <div className="hex-bg">
//               {generateDiv(window.screen.width + (window.screen.width / 3))}

//             </div>
//           </div>
//         </div>

//         <div className='w-full flex flex-col items-center justify-center '>
//           <div className='warning scale-75 md:scale-150 flex flex-col justify-center items-center'>
//             <div className='long-hex flex flex-col justify-center opacity-0 show-pop-up animation-delay-1'>
//               <div className="flex justify-evenly w-full items-center">
//                 <div className='warning-black opacity-0 blink animation-fast animation-delay-2'></div>
//                 <div className='flex flex-col font-bold text-center text-black'>
//                   <span className='text-xl'>TSUNAMI</span>
//                   <span className='text-xs'>Peringatan Dini Tsunami</span>
//                 </div>
//                 <div className='warning-black opacity-0 blink animation-fast animation-delay-2'></div>
//               </div>
//             </div>
//             <div className=' w-3/4 overflow-hidden bg-black relative rounded flex justify-center items-center opacity-0 show-pop-up animation-delay-2'>

//               <div className='absolute w-full h-2 m-auto top-0 left-0 right-0 overflow-hidden'>
//                 <div className='w-2 h-full strip-bar-red strip-animation'></div>
//               </div>
//               <div className='absolute w-full h-2 m-auto bottom-0 left-0 right-0 overflow-hidden'>
//                 <div className='w-2 h-full strip-bar-red strip-animation-reverse'></div>
//               </div>
//               <div className='absolute w-2 h-full m-auto top-0 bottom-0 left-0 overflow-hidden'>
//                 <div className='w-2 h-full strip-bar-red-vertical strip-animation-vertical-reverse'></div>

//               </div>

//               <div className='absolute w-2 h-full m-auto top-0 bottom-0 right-0 overflow-hidden'>
//                 <div className='w-2 h-full strip-bar-red-vertical strip-animation-vertical'></div>

//               </div>
//               <div className='w-full h-full p-6'>
//                 <div className="red-bordered p-2 text-center w-full mb-2">
//                   <div className='overflow-hidden relative'>
//                     <div className='strip-wrapper '><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//                     <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//                       <p className='p-1 bg-black font-bold text-xs text-glow'>POTENSI TSUNAMI</p>
//                     </div>
//                   </div>
//                 </div>
//                 <Card title={
//                   <div className='overflow-hidden relative'>
//                     <div className='strip-wrapper '><div className='strip-bar loop-strip-reverse anim-duration-20'></div><div className='strip-bar loop-strip-reverse anim-duration-20'></div></div>
//                     <div className='absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center'>
//                       <p className='p-1 bg-black font-bold text-xs text-glow uppercase'>{alertTsunami.infoTsunami.level}</p>
//                     </div>
//                   </div>
//                 }
//                   className='w-full h-auto'>
//                   <p className='text-xs'>
//                     {alertTsunami.infoTsunami.message}
//                   </p>
//                 </Card>
//               </div>

//             </div>
//           </div>



//         </div>
//         <div className='absolute top-0 bottom-0 left-0 right-0 '>
//           <div className='z-20 absolute top-8 left-8 md:top-28 md:left-28 scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up animation-delay-2'>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow"></div>
//               </div>
//             </div>
//           </div>

//           <div className='z-20 absolute bottom-8 left-8 md:bottom-28 md:left-28 scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up' style={{
//               animationDelay: "2.5s"
//             }}>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow"></div>
//               </div>
//             </div>
//           </div>

//           <div className='z-20 absolute top-8 right-8 md:top-28 md:right-28 scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up' style={{
//               animationDelay: "3s"
//             }}>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow"></div>
//               </div>
//             </div>
//           </div>


//           <div className='z-20 absolute bottom-8 right-8 md:bottom-28 md:right-28 scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up' style={{
//               animationDelay: "3.5s"
//             }}>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow"></div>
//               </div>
//             </div>
//           </div>

//           <div className='z-20 absolute h-28 m-auto bottom-0 top-0 right-16 md:right-1/4 hidden md:block scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up' style={{
//               animationDelay: "2s"
//             }}>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow"></div>
//               </div>
//             </div>
//           </div>

//           <div className='z-20 absolute h-28 m-auto bottom-0 top-0 left-16 md:left-1/4 hidden md:block scale-150'>
//             <div className='p-1 bg-black rounded-xl opacity-0 show-pop-up del' style={{
//               animationDelay: "2.5s"
//             }}>
//               <div className='p-1 red-bordered'>
//                 <div className="warning-tsunami-yellow "></div>
//               </div>
//             </div>
//           </div>



//         </div>



//       </div>}


//       <div className='fixed m-auto top-0 bottom-0 left-0 right-0 flex flex-col justify-center items-center overlay-bg text-center' id='loading-screen'>
//         <span className="loader"></span>
//         <p className='my-2 red-color p-2'>INI MERUPAKAN DESAIN KONSEP - DATA GEMPA DARI BMKG</p>
//       </div>

//     </div>

//   );
// }