monitor-im-flur/src/store/weather.ts

import { create } from "zustand";
import { devtools } from "zustand/middleware";
import fetchWeatherData from "@/api/weather";

const iconNumberToPng = {
    "0": {
        day: {
            description: "Sunny",
            image: "https://openweathermap.org/img/wn/01d@2x.png",
        },
        night: {
            description: "Clear",
            image: "https://openweathermap.org/img/wn/01n@2x.png",
        },
    },
    "1": {
        day: {
            description: "Mainly Sunny",
            image: "https://openweathermap.org/img/wn/01d@2x.png",
        },
        night: {
            description: "Mainly Clear",
            image: "https://openweathermap.org/img/wn/01n@2x.png",
        },
    },
    "2": {
        day: {
            description: "Partly Cloudy",
            image: "https://openweathermap.org/img/wn/02d@2x.png",
        },
        night: {
            description: "Partly Cloudy",
            image: "https://openweathermap.org/img/wn/02n@2x.png",
        },
    },
    "3": {
        day: {
            description: "Cloudy",
            image: "https://openweathermap.org/img/wn/03d@2x.png",
        },
        night: {
            description: "Cloudy",
            image: "https://openweathermap.org/img/wn/03n@2x.png",
        },
    },
    "45": {
        day: {
            description: "Foggy",
            image: "https://openweathermap.org/img/wn/50d@2x.png",
        },
        night: {
            description: "Foggy",
            image: "https://openweathermap.org/img/wn/50n@2x.png",
        },
    },
    "48": {
        day: {
            description: "Rime Fog",
            image: "https://openweathermap.org/img/wn/50d@2x.png",
        },
        night: {
            description: "Rime Fog",
            image: "https://openweathermap.org/img/wn/50n@2x.png",
        },
    },
    "51": {
        day: {
            description: "Light Drizzle",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Light Drizzle",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "53": {
        day: {
            description: "Drizzle",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Drizzle",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "55": {
        day: {
            description: "Heavy Drizzle",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Heavy Drizzle",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "56": {
        day: {
            description: "Light Freezing Drizzle",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Light Freezing Drizzle",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "57": {
        day: {
            description: "Freezing Drizzle",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Freezing Drizzle",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "61": {
        day: {
            description: "Light Rain",
            image: "https://openweathermap.org/img/wn/10d@2x.png",
        },
        night: {
            description: "Light Rain",
            image: "https://openweathermap.org/img/wn/10n@2x.png",
        },
    },
    "63": {
        day: {
            description: "Rain",
            image: "https://openweathermap.org/img/wn/10d@2x.png",
        },
        night: {
            description: "Rain",
            image: "https://openweathermap.org/img/wn/10n@2x.png",
        },
    },
    "65": {
        day: {
            description: "Heavy Rain",
            image: "https://openweathermap.org/img/wn/10d@2x.png",
        },
        night: {
            description: "Heavy Rain",
            image: "https://openweathermap.org/img/wn/10n@2x.png",
        },
    },
    "66": {
        day: {
            description: "Light Freezing Rain",
            image: "https://openweathermap.org/img/wn/10d@2x.png",
        },
        night: {
            description: "Light Freezing Rain",
            image: "https://openweathermap.org/img/wn/10n@2x.png",
        },
    },
    "67": {
        day: {
            description: "Freezing Rain",
            image: "https://openweathermap.org/img/wn/10d@2x.png",
        },
        night: {
            description: "Freezing Rain",
            image: "https://openweathermap.org/img/wn/10n@2x.png",
        },
    },
    "71": {
        day: {
            description: "Light Snow",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Light Snow",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "73": {
        day: {
            description: "Snow",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Snow",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "75": {
        day: {
            description: "Heavy Snow",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Heavy Snow",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "77": {
        day: {
            description: "Snow Grains",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Snow Grains",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "80": {
        day: {
            description: "Light Showers",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Light Showers",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "81": {
        day: {
            description: "Showers",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Showers",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "82": {
        day: {
            description: "Heavy Showers",
            image: "https://openweathermap.org/img/wn/09d@2x.png",
        },
        night: {
            description: "Heavy Showers",
            image: "https://openweathermap.org/img/wn/09n@2x.png",
        },
    },
    "85": {
        day: {
            description: "Light Snow Showers",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Light Snow Showers",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "86": {
        day: {
            description: "Snow Showers",
            image: "https://openweathermap.org/img/wn/13d@2x.png",
        },
        night: {
            description: "Snow Showers",
            image: "https://openweathermap.org/img/wn/13n@2x.png",
        },
    },
    "95": {
        day: {
            description: "Thunderstorm",
            image: "https://openweathermap.org/img/wn/11d@2x.png",
        },
        night: {
            description: "Thunderstorm",
            image: "https://openweathermap.org/img/wn/11n@2x.png",
        },
    },
    "96": {
        day: {
            description: "Light Thunderstorms With Hail",
            image: "https://openweathermap.org/img/wn/11d@2x.png",
        },
        night: {
            description: "Light Thunderstorms With Hail",
            image: "https://openweathermap.org/img/wn/11n@2x.png",
        },
    },
    "99": {
        day: {
            description: "Thunderstorm With Hail",
            image: "https://openweathermap.org/img/wn/11d@2x.png",
        },
        night: {
            description: "Thunderstorm With Hail",
            image: "https://openweathermap.org/img/wn/11n@2x.png",
        },
    },
};

const useWeatherStore = create(
    devtools(
        (set) => ({
            weatherData: {},
            fetchWeatherData: async () => {
                const data = await fetchWeatherData();
                const response = data[0];

                if (response === null) {
                    console.error("Failed to fetch weather data");
                    return;
                }

                const utcOffsetSeconds = response.utcOffsetSeconds();
                const current = response.current();
                const hourly = response.hourly();
                const daily = response.daily();

                if (!current || !hourly || !daily) {
                    console.error("Failed to fetch weather data");
                    return;
                }

                const weatherData = {
                    current: {
                        time: current.time(),
                        temperature_2m: current.variables(0)?.value(),
                        precipitation: current.variables(1)?.value(),
                        rain: current.variables(2)?.value(),
                        showers: current.variables(3)?.value(),
                        snowfall: current.variables(4)?.value(),
                        relative_humidity_2m: current.variables(5)?.value(),
                        apparent_temperature: current.variables(6)?.value(),
                        weather_code: current.variables(7)?.value(),
                        cloud_cover: current.variables(8)?.value(),
                        is_day: current.variables(9)?.value(),
                    },
                    hourly: {
                        time: [
                            ...Array(
                                (Number(hourly.timeEnd()) -
                                    Number(hourly.time())) /
                                    hourly.interval(),
                            ),
                        ].map(
                            (_, i) =>
                                new Date(
                                    (Number(hourly.time()) +
                                        i * hourly.interval() +
                                        utcOffsetSeconds) *
                                        1000,
                                ),
                        ),
                        temperature_2m: hourly.variables(0)?.valuesArray(),
                        precipitation: hourly.variables(1)?.valuesArray(),
                        rain: hourly.variables(2)?.valuesArray(),
                        precipitation_probability: hourly
                            .variables(3)
                            ?.valuesArray(),
                    },
                    daily: {
                        time: [
                            ...Array(
                                (Number(daily.timeEnd()) -
                                    Number(daily.time())) /
                                    daily.interval(),
                            ),
                        ].map(
                            (_, i) =>
                                new Date(
                                    (Number(daily.time()) +
                                        i * daily.interval() +
                                        utcOffsetSeconds) *
                                        1000,
                                ),
                        ),
                        temperature_2m_max: daily.variables(0)?.valuesArray(),
                        temperature_2m_min: daily.variables(1)?.valuesArray(),
                    },
                };

                // const isDay = weatherData.current.is_day === 1;
                const weatherCode = weatherData.current.weather_code;
                const url = iconNumberToPng[weatherCode].day.image;

                weatherData.current = { ...weatherData.current, icon: url };

                set({ weatherData });
            },
        }),
        {
            name: "weather-store",
        },
    ),
);

export { useWeatherStore };