"use client"
import { Input } from '@/components/ui/input'
import { ChevronLeft } from 'lucide-react'
import React, { useEffect, useState } from 'react'
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
import LocationOption from '@/app/_utils/LocationOption'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import ThemeOption from '@/app/_utils/ThemeOption'
import { doc, getFirestore, setDoc } from 'firebase/firestore'
import { app } from '@/config/FirebaseConfig'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { toast } from 'sonner'
import { useRouter } from 'next/navigation'

const MeetingForm = ({setFormEvent}) => {
    const [themeColor, setThemeColor] = useState();

    //set state for each event
    const [eventName, setEventName] = useState();
    const [timeDuration, setTimeDuration] = useState(30);
    const [locationMeeting, setLocationMeeting] = useState();
    const [urlMeeting, setUrlMeeting] = useState();

    //initialize the data
    const db = getFirestore(app);
    const {user} = useKindeBrowserClient();
    const router = useRouter();

    //create event
    const onCreateEvent = async () => {
        const id = Date.now().toString(); 
        await setDoc(doc(db, 'MeetingEvent', id), {
            id: id,
            eventName: eventName,
            timeDuration: timeDuration,
            locationMeeting: locationMeeting,
            urlMeeting: urlMeeting,
            themeColor: themeColor,
            businessId: doc(db, 'Business', user?.email),
            createdBy: user?.email
        })
        toast('New event/meeting is created');
        router.replace('/dashboard/meeting');
    }

    useEffect(() => {
        setFormEvent({
            eventName: eventName,
            timeDuration: timeDuration,
            locationMeeting: locationMeeting,
            urlMeeting: urlMeeting,
            themeColor: themeColor
        })
    }, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor]);

   
  return (
    <div className='px-5 lg:px-10 py-10'>
        <Link href={'/dashboard'}><p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p></Link>
        <div className='mt-5'>
            <p className='text-xl font-semibold mb-2'>Create New Event</p><hr/>
        </div>
        <div className='flex flex-col gap-2'>
            <p className='font-semibold mt-5'>Event Name <span className='text-red-500'>*</span></p>
            <Input onChange={(ev) => setEventName(ev.target.value)} placeholder="Enter your event/meeting name" className='text-sm'/>
            <p className='font-semibold'>Time Duration <span className='text-red-500'>*</span></p>
            <DropdownMenu>
                <DropdownMenuTrigger asChild className='outline-none'>
                    <button className=' max-w-[100px] border rounded-md px-2 py-2 text-sm'>{timeDuration} minutes</button>
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                    <DropdownMenuItem onClick={() => setTimeDuration(15)}>15 minutes</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTimeDuration(30)}>30 minutes</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTimeDuration(45)}>45 minutes</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTimeDuration(60)}>60 minutes</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <p className='font-semibold'>Location <span className='text-red-500'>*</span></p>
            <div className='grid grid-cols-4 gap-2'>
                {LocationOption.map((option, index) => (
                    <div key={index} onClick={() => setLocationMeeting(option.name)} className={`border rounded-md flex flex-col justify-center items-center text-center p-2 hover:bg-gray-200 cursor-pointer ${locationMeeting == option.name && 'bg-gray-200'}`}>
                        <Image src={option.icon} width={20} height={20} alt={option.name}/>
                        <p className='text-xs mt-2 font-semibold'>{option.name}</p>
                    </div>
                ))}
            </div>
            {locationMeeting && 
            <div>
                <p className='font-semibold'> Add {locationMeeting} url or phone number<span className='text-red-500'>*</span></p>
                <Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url or phone number' className='text-sm'/>
            </div>
            }
            <p className='font-semibold'>Select Color</p>
            <div className='flex justify-evenly'>
                {ThemeOption.map((color,index) => (
                    <div key={index} onClick={() => setThemeColor(color)} className={`h-6 w-6 rounded-full ${themeColor == color && 'border-2 border-black'}`} style={{backgroundColor:color}}></div>
                ))}
            </div>
        </div>
        <Button onClick={() => onCreateEvent()} disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
    </div>
  )
}

export default MeetingForm