import { useEffect, useState, useRef } from "react";
import { useBlockProps } from "@wordpress/block-editor";
import Map from "./components/Map";
import MapBlockSettings from "./components/MapBlockSettings";
import useFetchAllMaps from './custom-hooks/useFetchAllMaps';
import useFetchMapMarkup from './custom-hooks/useFetchMapMarkup';
import NoMaps from "./components/NoMaps";
import NoApiKey from "./components/NoApiKey";
import { __ } from "@wordpress/i18n";
import $ from 'jquery';
import "./editor.scss";


export default function Edit({ attributes, setAttributes }) { 
  
  const { rest_url, namespace, version, default_map_id, nonce, siteurl, api_key } = wpgmp_server_data;

  if( !api_key && typeof default_map_id === 'undefined' && default_map_id === '0' ){
    return <NoApiKey siteurl={siteurl}/>
  }

  if (typeof default_map_id === 'undefined' || default_map_id === '0') {
     return <NoMaps siteurl={siteurl}/>
  }
  
  const { selectedMapId }                     = attributes;
  const { allMapLists }                       = useFetchAllMaps(rest_url, namespace, version, nonce);
  const { mapFound, mapMarkupState, deletedMapComponent:DeletedMap, selectedMapObj, fetchMapMarkup }  = useFetchMapMarkup(rest_url, namespace, version, nonce, attributes, setAttributes);
  const [ latestMapId, setLatestMapId]        = useState("");
  const mapDynamicContainerRef                = useRef(null);
  const mapObjRef = useRef(null);
  
  useEffect(() => {

    if (selectedMapId) {
      fetchMapMarkup(selectedMapId);
      setLatestMapId(selectedMapId);
    } else {
      if (default_map_id) fetchMapMarkup(default_map_id);
      setLatestMapId(default_map_id);
    }
        
  }, [selectedMapId]);

  useEffect(() => {

    const observer = new MutationObserver(() => {
      if (mapDynamicContainerRef.current) {

        const mapContainer = mapDynamicContainerRef.current.querySelector('.wpgmp_map');
        if (mapContainer) {
          const map_obj = $(mapContainer).data("wpgmp_maps");
          if (map_obj) {
            mapObjRef.current = map_obj;
            observer.disconnect();
          }
        }
      }

    });

    if (mapDynamicContainerRef.current) {

      observer.observe(mapDynamicContainerRef.current, {
        childList: true,
        subtree: true,
      });
    }

    return () => observer.disconnect();
  }, [mapMarkupState]);


  useEffect(() => {
    
    if(! attributes.preDefinedToggler && ! attributes.customDefinedToggler){
      updateMapStyling('hide');
    }

    if( attributes.preDefinedToggler || attributes.customDefinedToggler){
      updateMapStyling('show');
    }

  }, [attributes.preDefinedToggler, attributes.customDefinedToggler]);

  const updateMapStyling = (todo) => {
    
    const existingStyleTag = document.getElementById('wpgmp_server_generated_css_rules');
    const dynamicStyleTag = document.getElementById('dynamic-map-styles');
    
    if (existingStyleTag && todo!= '') {

        if(todo == 'hide'){
          existingStyleTag.disabled = true;
        }
        else{
          existingStyleTag.disabled = false;
        }
        
    }
  
    if (dynamicStyleTag && todo!= '') {

      if(todo == 'hide'){
        dynamicStyleTag.disabled = true;
      }
      else{
        dynamicStyleTag.disabled = false;
      }
    
    }

  }

  const fs = selectedMapObj?.map_all_control?.wpgmp_base_font_size;

  return (
    <div {...useBlockProps()}>
      { mapFound ? <Map mapDynamicContainerRef={mapDynamicContainerRef} mapMarkupState={mapMarkupState} fs={fs}/> : DeletedMap }
       <MapBlockSettings
         attributes={attributes}
         setAttributes={setAttributes}
         latestMapId={latestMapId}
         allMapLists={allMapLists}
         mapObjRef={mapObjRef}
         mapDynamicContainerRef={mapDynamicContainerRef}
         selectedMapObj={selectedMapObj}
      />
   </div>
  );
}