<template>
    <div class="my-2">
        <h2>Météo</h2>
        <p v-if="loading"></p>
        <div v-else class="my-1">

            <div class="flex flex-wrap -m-2 mt-2">
                <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
                    <div class="bg-orange-300 rounded text-black m-2 p-2 flex flex-col">
                        <h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
                        <div class="flex">
                            <div class="flex flex-col justify-end">
                                <div>{{ 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 flex-col flex-1 justify-end items-end">
                                <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>
            </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: 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) {
            // eslint-disable-next-line no-undef
            axios.get('/api/meteo')
                .then(response => {
                    this.meteo = response.data
                    this.loading = false
                    localStorage.setItem('meteo', JSON.stringify(response.data))
                })
                .catch(() => {
                    console.log('Unable to fetch meteo.')
                })
        }
    },
}
</script>

