"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { Skeleton } from '@/components/ui/skeleton';
import { CloudIcon, CloudRainIcon, SnowflakeIcon, SunIcon, Zap } from 'lucide-react';
import React from 'react'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel"
import moment from 'moment';
import { kelvinToFarenheit } from '@/app/utils/Misc';

const DailyForcast = () => {
  const {forecast, dailyForecast} = useGlobalContext();
  const {weather} = forecast;
  const {city, list} = dailyForecast;
  if(!dailyForecast || !city || !list){
    return <Skeleton className='h-[12rem] w-full' />
  }
  if(!forecast || !weather){
    return <Skeleton className='h-[12rem] w-full' />
  }
  const today = new Date();
  const todayString = today.toISOString().split("T")[0];

  const todayForecast = list.filter((forecast: {dt_txt: string; main: {temp: number}}) => {
    return forecast.dt_txt.startsWith(todayString);
  })

  const {main: weatherMain} = 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/>; 
    }
};


  return (
    <div className = 'flex flex-col justify-center gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-8 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
        <div className='h-full flex gap-4 overflow-hidden'>
          {todayForecast.length < 1 ? (<div className='px-5'>Loading...</div>) :
            (
              <div className='w-full'>
                <Carousel>
                  <CarouselContent>
                    {
                      todayForecast.map((forecast: {dt_txt: string; main: {temp: number}}) => {
                        return <CarouselItem key={forecast.dt_txt} className='flex flex-col gap-4 basis-[6rem] cursor-grab items-center'>
                          <p>{moment(forecast.dt_txt).format("hh:mm")}</p>
                          <p>{getIcon()}</p>
                          <p className='mt-4'>{kelvinToFarenheit(forecast.main.temp)}°F </p>
                          </CarouselItem>
                      })
                    }
                  </CarouselContent>
                </Carousel>
              </div>
            )
          }
        </div>
    </div>
  )
}

export default DailyForcast