"use client"
import DaysList from '@/app/_utils/DaysList'
import React, { useEffect, useState } from 'react'
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { doc, getDoc, getFirestore, updateDoc } from 'firebase/firestore'
import { app } from '@/config/FirebaseConfig'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { toast } from 'sonner'


const Availability = () => {
    const [availableDays, setAvailableDays] = useState({Sunday: false}, {Monday: false}, {Tuesday:false}, {Wednesday: false}, {Thuesday:false}, {Friday: false}, {Saturday: false});
    const [startTime, setStartTime] = useState();
    const [endTime, setEndTime] = useState();
    const {user} = useKindeBrowserClient();
    const db = getFirestore(app);
    
    //available days functionality
    const handleChange = (day, value) => {
        setAvailableDays({
            ...availableDays, [day]: value
        })
        console.log(availableDays)
    }

    const handleSave = async () => {
        console.log(availableDays, startTime, endTime);
        const docRef = doc(db, 'Business', user?.email)
        await updateDoc(docRef, {
            availableDays: availableDays,
            startTime: startTime,
            endTime: endTime
        }).then(res => {
            toast('Available days and time are updated.')
        })
    }

    //get information after save
    const getInfo = async () => {
        const docRef = doc(db, 'Business', user?.email);
        const docSnap = await getDoc(docRef);
        const result = docSnap.data();
        setAvailableDays(result.availableDays);
        setStartTime(result.startTime);
        setEndTime(result.endTime);
    }
    
    useEffect(() => {
        user && getInfo();
    }, [user])


  return (
    <div className='px-5'>
        <p className='font-semibold text-xl'>Availability</p><hr className='my-5'/>
        <div>
            <p className='my-5 font-semibold'>Available days & time</p>
            <div className='grid grid-cols-2 md:grid-cols-4 gap-5'>
                {DaysList.map((item, index) => (
                    <div key={index} className='grid grid-cols-3 mb-2'>
                        <p className='flex items-center gap-2 text-sm sm:text-base'>
                            <Checkbox onCheckedChange={(e) => handleChange(item.day, e)} 
                            checked={availableDays[item.day]  ?availableDays[item.day] : false}/>{item.day}
                        </p>  
                    </div>
                ))}
            </div>
            <div className='flex gap-2 mb-2 mt-5'>
                <div>
                    <p className='mb-1 text-xs font-semibold text-gray-700'>Start time</p>
                    <p className='flex gap-1 sm:gap-2 items-center'><Input type='time' onChange={(e) => setStartTime(e.target.value)} defaultValue={startTime}/> - </p>
                </div>
                <div>
                    <p className='mb-1 text-xs font-semibold text-gray-700'>End time</p>
                    <Input type="time" onChange={(e) => setEndTime(e.target.value)} defaultValue={endTime}/>
                </div>
            </div>
        </div>
        <Button onClick={handleSave} className="mt-5">Save</Button>
    </div>
  )
}

export default Availability