import { Weather } from "lib/types/weather";
import { Variable } from "types/variable";
import options from "options";
import { Unit } from "lib/types/options";
import { getRainChance, getWindConditions } from "globals/weather";

const { unit } = options.menus.clock.weather;

export const TodayStats = (theWeather: Variable<Weather>) => {
    return Widget.Box({
        class_name: "calendar-menu-weather today stats container",
        hpack: "end",
        vpack: "center",
        vertical: true,
        children: [
            Widget.Box({
                class_name: "weather wind",
                children: [
                    Widget.Label({
                        class_name: "weather wind icon txt-icon",
                        label: "",
                    }),
                    Widget.Label({
                        class_name: "weather wind label",
                        label: Utils.merge(
                            [theWeather.bind("value"), unit.bind("value")],
                            (wthr: Weather, unt: Unit) => {
                                return getWindConditions(wthr, unt);
                            },
                        ),
                    }),
                ],
            }),
            Widget.Box({
                class_name: "weather precip",
                children: [
                    Widget.Label({
                        class_name: "weather precip icon txt-icon",
                        label: "",
                    }),
                    Widget.Label({
                        class_name: "weather precip label",
                        label: theWeather
                            .bind("value")
                            .as(
                                (v) => getRainChance(v),
                            ),
                    }),
                ],
            }),
        ],
    });
};