import { GoClock } from "react-icons/go";
import { PiMapPinLight } from "react-icons/pi";
import { Calendar } from "@/components/ui/calendar"
import React, { useEffect, useState } from 'react'
import Link from "next/link";

const PreviewMeeting = ({formEvent}) => {
    const [date, setDate] = useState(new Date());
    const [timeSlots, setTimeSlots] = useState();

    useEffect(() => {
        formEvent?.timeDuration && createTimeSlot(formEvent?.timeDuration)
    }, [formEvent])
    //create time slot
    const createTimeSlot = (interval) => {
        const startTime = 8 * 60;
        const endTime = 22 * 60;
        const totalSlots = (endTime - startTime) / interval;
        const slots = Array.from({length: totalSlots}, (_, i) => {
            const totalMinutes = startTime + i * interval;
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;
            const formattedHours = hours > 12 ? hours - 12: hours;
            const period = hours >= 12? 'PM' : 'AM';
            return `${String(formattedHours).padStart(2, '0')} : ${String(minutes).padStart(2, '0')} ${period}`
        });
        setTimeSlots(slots);
    }
    

  return (
    <div className='px-5 py-10 shadow-md m-4 border-t-8' style={{borderTopColor: formEvent?.themeColor}}>
        <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
        <div className='grid grid-cols-1 lg:grid-cols-3 mt-5'>
            <div className='border-r'>
                <p className='font-semibold'>Event Name:</p>
                <p className="font-normal">{formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}</p>
                <div className='mt-5 flex flex-col gap-2'>
                    <p className='flex gap-1 items-center'><GoClock/>{formEvent?.timeDuration} minutes</p>
                    <p className='flex gap-1 items-center'><PiMapPinLight/>{formEvent?.locationMeeting}</p>
                    <Link href={formEvent?.urlMeeting?formEvent?.urlMeeting:''} className="text-gray-500 underline text-sm">{formEvent?.urlMeeting}</Link>
                </div>
            </div>
            <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
                <div className="flex flex-col">
                    <p className="font-semibold">Select your meeting date & time</p>
                    <Calendar disabled={(date) => date < new Date()} mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
                </div>
                <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
                    {timeSlots?.map((time, index) => (
                        <button className='text-xs p-2 border rounded-md hover:bg-gray-100'>{time}</button>
                    ))}
                </div>
            </div>
        </div>
    </div>
  )
}

export default PreviewMeeting