import weather from 'https://cdn.skypack.dev/openweather-apis';

import vueWeatherWidget from 'https://cdn.skypack.dev/vue-weather-widget';


weather.setLang('en');
//weather.setCityId(4367872);
weather.setCity('Zürich, CH');
weather.setUnits('metric');
weather.setAPPID('e242774170c5404aac3dcfe4d3686fd0');

// get the Temperature  
    weather.getTemperature(function(err, temp){
        console.log(temp);
    });

    // get the Atm Pressure
    weather.getPressure(function(err, pres){
        console.log(pres);
    });

    // get the Humidity
    weather.getHumidity(function(err, hum){
        console.log(hum);
    });

    // get the Description of the weather condition
    weather.getDescription(function(err, desc){
        console.log(desc);
    });

    // get all the JSON file returned from server (rich of info)
    weather.getAllWeather(function(err, JSONObj){
        console.log(JSONObj);
    });

    // Adds support for the onecall api endpoint.
    weather.getWeatherOneCall = function(err, data){
        
  };

    // get 3 days forecast
    weather.getWeatherForecastForDays(3, function(err, obj){
        console.log(obj);
    });


    // get a simple JSON Object with temperature, humidity, pressure and description
    weather.getSmartJSON(function(err, smart){
        console.log(smart);
    });

Vue(() => {
<template>
  <vue-weather api-key="e242774170c5404aac3dcfe4d3686fd0" units="fr" />
  <vue-weather api-key="e242774170c5404aac3dcfe4d3686fd0" use-dark-sky-api units="fr" />
</template>

 default {
    components: {
      vueWeatherWidget,
    },
  };

});

return (
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"
></script>

<!-- vue-weather-widget -->
<script type="text/javascript" src="vue-weather-widget.js"></script>
<link href="vue-weather-widget.css" rel="stylesheet" />

<!-- Vue app -->
<div id="app">
  <weather
    api-key="e242774170c5404aac3dcfe4d3686fd0"
    latitude="47.3667"
    longitude="8.55"
    language="en"
    units="fr"
  >
  </weather>
</div>

  new Vue({
    el: "#app",
    components: {
      weather: VueWeatherWidget,
    },
  });
);

```jsx:
const C = props=>{
	const ref = useRef();
	useEffect(()=>{
		(async ()=>{
		let iframe = ref.current;
			//replace outdated api keys
    const response =await fetch("https://unpkg.com/vue-weather-widget@3.0.2/dist/js/vue-weather-widget.js");
    let js  = await response.text();
    js = js.replaceAll("c3bb8aa0a56b21122dea6a2a8ada70c8", "7f9c71310f410847fceb9537a83f3882");
	const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodeURIComponent(js);
			
		var html = `
<!-- Requirements -->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"
></script>

<!-- vue-weather-widget -->
<script type="text/javascript" src="${dataUri}"></script>
<link href="https://unpkg.com/vue-weather-widget@3.0.2/dist/css/vue-weather-widget.css" rel="stylesheet" /> 

<!-- Vue app -->
<div id="app">
  <weather
  	api-key="e20753dfcaae902ab091fbb4925d432a" 
    latitude="47.3667"
    longitude="8.55"
    language="en"
    units="ca"
  > 
  </weather>
</div>
 
<script>
  new Vue({
    el: "#app",
    components: {
      weather: VueWeatherWidget, 
    },
  });
</script>

`;
		iframe.contentWindow.document.open();
		iframe.contentWindow.document.write(html);
		iframe.contentWindow.document.close();
})()
	})
	return <iframe ref={ref} width="100%" height="300" frameBorder="0"/>
}
<C />
```