<template>
    <div>
        <div v-if="loading">
            <Loader />
        </div>
        <div v-else class="m-2">
            <div class="card">
                <div class="text-black m-2 p-2 flex flex-col">
                    <h2>{{ meteo.city.name }}</h2>
                    <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>
</template>

<script>
import Loader from '../../components/Loader'

export default {
    name: 'OpenWeatherCard',
    components: {
        Loader
    },
    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>

