"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import React from 'react'
import { TbUvIndex } from "react-icons/tb";

const UVI = () => {
    const {uvIndex} = useGlobalContext();
    if(!uvIndex || !uvIndex.daily){
        return <Skeleton className='h-[12rem] w-full'/>
    }
    const {daily} = uvIndex;
    //console.log(uvIndex)
    const {uv_index_clearsky_max, uv_index_max} = daily;
    const uvIndexMax = uv_index_max[0].toFixed(0);
    //console.log(uvIndexMax)
    const uvIndexScale = (uvIndex: number) => {
        if(uvIndex <= 2){
            return{
                text: "Low",
                desc: "No protection needed"
            };
        }
        else if(uvIndex <= 5){
            return{
                text: "Moderate",
                desc: "Some protection is required"
            };
        }
        else if(uvIndex <= 7){
            return{
                text: "High",
                desc: "Protection essential"
            };
        }
        else if(uvIndex <= 10){
            return{
                text: "Very High",
                desc: "Extra protection is needed"
            };
        }
        else{
            return{
                text: "Extreme",
                desc: "Stay inside"
            };
        }
    }
    const leftProgress = (uvIndexMax / 12) * 100;


  return (
    <div className='flex flex-col gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-6 px-4 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
        <div>
           <h2 className='flex items-center gap-1 '><TbUvIndex />UV Index</h2> 
           <div className='flex items-center gap-1 pb-2 pt-6'>
            <p>{uvIndexMax}</p>
            <span>({uvIndexScale(uvIndexMax).text})</span>
           </div>
           <Progress value={leftProgress} className='air-progress' max={12}/>
        </div>
        <p>{uvIndexScale(uvIndexMax).desc}</p>
    </div>
  )
}

export default UVI