"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { kelvinToFarenheit } from '@/app/utils/Misc';
import { CloudIcon, CloudRainIcon, SnowflakeIcon, SunIcon, Zap } from 'lucide-react';
import { IoNavigateOutline } from "react-icons/io5";

import React, { useEffect, useState } from 'react'
import moment from 'moment';

const Temperature = () => {
    const {forecast} = useGlobalContext();
    const {main, timezone, name, weather} = forecast;
    if(!forecast || !weather){
        return <div>Loading...</div>
    }
    const temp = kelvinToFarenheit(main?.temp);
    const minTemp = kelvinToFarenheit(main?.temp_min);
    const maxTemp = kelvinToFarenheit(main?.temp_max);

    //set time, day, weather
    const [localTime, setLocalTime] = useState<String>("");
    const [currentDay, setCurrentDay] = useState<String>("");
    const {main: weatherMain, description} = weather[0];
    const getIcon = () => {
        switch (weatherMain){
            case "Snow":
                return <SnowflakeIcon/>;
            case "Rain":
                return <CloudRainIcon/>;
            case "Clear":
                return <SunIcon/>;
            case "Clouds":
                return <CloudIcon/>;
            case "Thunderstorm":
                return <Zap/>; 
        }
    };

    //real time update
    useEffect(() => {
        const interval = setInterval(() => {
            const localMoment = moment().utcOffset(timezone / 60);
            const formatedTime = localMoment.format("hh:mm:ss");
            const day = localMoment.format("dddd")

            setLocalTime(formatedTime);
            setCurrentDay(day);
        }, 1000);
    }, []);




  return (
    <div className='flex flex-col justify-between pt-6 px-4 pb-5 border rounded-lg dark:bg-darkGgray shadow-sm dark:shadow-none'>
        <p className='flex justify-between items-center'>
            <span className=''>{currentDay}</span>
            <span className=''>{localTime}</span>
        </p>
        <p className='flex pt-2 font-bold gap-1'>
            <span>{name}</span>
            <span className=''><IoNavigateOutline/></span>
        </p>
        <p className='py-10 text-8xl font-bold self-center'>{temp}°F</p>
        <div>
            <div>
                <span>{getIcon()}</span>
                <p className='pt-2 capitalize text-lg'>{description}</p>
            </div>
            <p className='flex gap-1'>
                <span>Low: {minTemp}°F</span>
                <span>Hight: {maxTemp}°F</span>
            </p>
        </div>
    </div>
  )
}

export default Temperature