<template>
    <div class="my-2">
        <h2>Météo</h2>
        <p v-if="loading"></p>
        <div v-else class="meteo card my-1">
            <h3>{{ meteo.city.name }}</h3>
            <div class="flex flex-end">
                <div class="flex-1 flex-col flex-end">
                    <div class="meteo-date">{{ dateFormat(meteo.list[0].dt_txt) }}</div>
                    <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
                    <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
                    <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
                </div>
                <div class="flex-1 text-right">
                    <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
                    <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
                </div>
            </div>

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

<script>
    export default {
        name: "OpenWeatherCard",
        data: function () {
            return {
                loading: true,
                meteo: null,
            }
        },
        methods : {
            dateFormat(date) {
                const d = new Date(date)
                const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
                const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d)
                return `${mo}/${da} - ${ho}h`
            }
        },
        mounted() {
            let refreshMeteo = false

            if(localStorage.getItem('meteo')) {
                this.meteo = JSON.parse(localStorage.getItem('meteo'))
                let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
                if (deltaTime/1000/3600 > 3) {
                    refreshMeteo = true
                }
                this.loading = false
                console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
            } else {
                refreshMeteo = true
            }

            if (refreshMeteo) {
                console.log("refreshing meteo data")
                axios.get('/api/meteo')
                    .then(response => {
                        this.meteo = response.data
                        this.loading = false
                        localStorage.setItem('meteo', JSON.stringify(response.data));
                    })
                    .catch(error => {
                        alert('Unable to fetch meteo.')
                    })
            }
        },
    }
</script>

