"use client"
import React, { useEffect, useState } from 'react'
import { app } from '@/config/FirebaseConfig'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { collection, deleteDoc, doc, getDoc, getDocs, getFirestore, orderBy, query, where } from 'firebase/firestore'
import { GoClock } from "react-icons/go";
import { PiMapPinLight, PiCopyLight } from 'react-icons/pi'
import { IoTrashOutline } from "react-icons/io5";
import { IoSettingsOutline } from "react-icons/io5";
import { toast } from 'sonner'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"
  

const MeetingEventList = () => {
    const [eventList, setEventList] = useState([]);
    const [businessInfo, setBusinessInfo] = useState()
    const db = getFirestore(app);
    const {user} = useKindeBrowserClient();

    const getEventList = async () => {
        setEventList([]);
        const q = query(collection(db, "MeetingEvent"), where("createdBy", "==", user?.email), orderBy('id', 'desc'));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            setEventList(prevEvent => [...prevEvent, doc.data()])
        });
    }
    
    //Delete event functionality
    const onDeleteEvent = async (event) => {
        await deleteDoc(doc(db, "MeetingEvent", event?.id)).then(res => {
            toast('Meeting/Event is deleted');
            getEventList();
        })
    }

    //grab information and pass to copy link
    const BusinessInfo = async () => {
        const docRef = doc(db, 'Business', user.email);
        const docSnap = await getDoc(docRef)
        setBusinessInfo(docSnap.data());
    }

    const onCopyHandle = (event) => {
        const meetingEventUrl = process.env.NEXT_PUBLIC_BASE_URL+'/'+businessInfo.businessName+'/'+event.id
        navigator.clipboard.writeText(meetingEventUrl); 
        toast('Copied')
    }

    useEffect(() => {
        user && getEventList();
        user && BusinessInfo();

    }, [user])


  return (
    <div className='mt-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5'>
        {eventList.length > 0 ? eventList?.map((event, index) => (
            <div className='border shadow-md border-t-8 rounded-md p-5 flex flex-col gap-5' style={{borderTopColor:event?.themeColor}}>
                <p className='text-lg'>{event?.eventName}</p>
                <div className='flex justify-between'>
                    <p className='flex gap-1 items-center'><GoClock/>{event.timeDuration} minutes</p>
                    <p className='flex gap-1 items-center'><PiMapPinLight/>{event.locationMeeting}</p>
                </div>
                <hr/>
                <div className='flex justify-between'>
                    <button onClick={() => {onCopyHandle(event)}} className='text-lg'><PiCopyLight/></button>
                    <button onClick={() => onDeleteEvent(event)}><IoTrashOutline/></button>
                </div>
            </div>
        )): <p className='font-semibold text-green-800'>Loading...</p>
        }
    </div>
  )
}

export default MeetingEventList