import {LOCATION} from '../variables';

window.map = null;

async function main() {
    // For each object in the JS API, there is a Vue counterpart
    // To use the Vue version of the API, include the module @yandex/ymaps3-vuefy
    const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
    const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
    const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapListener, YMapControls, YMapControlButton, YMapMarker} = vuefy.module(ymaps3);

    const app = Vue.createApp({    
        setup() {
            const location = Vue.ref(LOCATION);
            const refMap = (ref) => {
                window.map = ref?.entity;
            };
            const hasAutoRotate = Vue.ref(true);
            const mapAzimuth = Vue.ref(0);
            const mapTilt = Vue.ref((40 * Math.PI) / 180);
            let frameId;

            const autoRotateCamera = () => {
                if (hasAutoRotate.value) {
                    mapAzimuth.value += (10 * Math.PI) / 180 / 100;
                    frameId = requestAnimationFrame(autoRotateCamera);
                }
            };

            Vue.onMounted(() => {
                frameId = requestAnimationFrame(autoRotateCamera);
            });

            Vue.onUnmounted(() => {
                cancelAnimationFrame(frameId);
            });

            const onActionStartHandler = () => {
                hasAutoRotate.value = false;
            };

            const autoRotateBtnHandler = () => {
                hasAutoRotate.value = !hasAutoRotate.value;
                frameId = requestAnimationFrame(autoRotateCamera);
            };

            const rotateLeftBtnHandler = () => {
                onActionStartHandler();
                mapAzimuth.value = map.azimuth - (30 * Math.PI) / 180;
            };

            const rotateRightBtnHandler = () => {
                onActionStartHandler();
                mapAzimuth.value = map.azimuth + (30 * Math.PI) / 180;
            };

            const tiltUpBtnHandler = () => {
                onActionStartHandler();
                mapTilt.value = map.tilt - (10 * Math.PI) / 180;
            };

            const tiltDownBtnHandler = () => {
                onActionStartHandler();
                mapTilt.value = map.tilt + (10 * Math.PI) / 180;
            };
            
            const onMarkerClick = (message) => {
              alert(message);
            };

            return {
                location,
                // markerProps, 
                refMap,
                hasAutoRotate,
                mapAzimuth,
                mapTilt,
                onActionStartHandler,
                autoRotateBtnHandler,
                rotateLeftBtnHandler,
                rotateRightBtnHandler,
                tiltUpBtnHandler,
                tiltDownBtnHandler,
                onMarkerClick //
            };
        },
        components: {
            YMap,
            YMapDefaultSchemeLayer,
            YMapDefaultFeaturesLayer,
            YMapListener,
            YMapControls,
            YMapControlButton,
            YMapMarker  
        },
        template: `
    <YMap
      :location="location"
      showScaleInCopyrights="true"
      :camera="{ azimuth: mapAzimuth, tilt: mapTilt, duration: hasAutoRotate ? 0 : 250 }"
      :ref="refMap"
    >
        <YMapDefaultSchemeLayer />
        <YMapDefaultFeaturesLayer /> 
        <template v-for="markerProp in markerProps" :key="markerProp.id">
              <YMapMarker :coordinates="markerProp.coordinates">
                <img
                  :src="markerProp.iconSrc"
                  class="icon-marker"
                  @click="onMarkerClick(markerProp.message)"
                />
              </YMapMarker>
            </template>

      <YMapListener @action-start="onActionStartHandler" />
       <YMapControls position="bottom">
        <YMapControlButton
          text="Вращать камеру"
          color="#fff"
          :background="hasAutoRotate ? '#fd6466e6' : '#007afce6'"
          @click="autoRotateBtnHandler"
        />
         
      
      
            
    </YMap>
  `
        

    });

    app.mount('#app');
}
main();