{props.user.name}

{props.eventType.title}

{props.eventType.length} minutes

{selectedLocation === LocationType.InPerson &&

{locationInfo(selectedLocation).address}

}

{preferredTimeZone && dayjs(date).tz(preferredTimeZone).format( (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}

{props.eventType.description}

Your name

Email address

{locations.length > 1 && (

Location {locations.map( (location) => ( setSelectedLocation(e.target.value)} className="location" name="location" value={location.type} checked={selectedLocation === location.type} /> {locationLabels[location.type]} ))}

)} {selectedLocation === LocationType.Phone && (

Phone Number

{}} />

)} {props.eventType.customInputs && props.eventType.customInputs.sort((a,b) => a.id - b.id).map(input => (

{input.type !== EventTypeCustomInputType.Bool && {input.label}} {input.type === EventTypeCustomInputType.TextLong &&

}
                                      {input.type === EventTypeCustomInputType.Text &&
                                      <input type="text" name={"custom_" + input.id} id={"custom_" + input.id}
                                             required={input.required}
                                             className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                             placeholder=""/>}
                                      {input.type === EventTypeCustomInputType.Number &&
                                      <input type="number" name={"custom_" + input.id} id={"custom_" + input.id}
                                             required={input.required}
                                             className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                             placeholder=""/>}
                                      {input.type === EventTypeCustomInputType.Bool &&
                                      <div className="flex items-center h-5">
                                          <input type="checkbox" name={"custom_" + input.id} id={"custom_" + input.id}
                                             className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
                                             placeholder=""/>
                                          <label htmlFor={input.label} className="block text-sm font-medium text-gray-700">{input.label}</label>
                                      </div>}
                                  </div>
                                ))}
                                <div className="mb-4">
                                    <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label>
                                    <textarea name="notes" id="notes" rows={3}  className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking ? props.booking.description : ''}/>
                                </div>
                                <div className="flex items-start">
                                    <Button type="submit" className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button>
                                    <Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}>
                                        <a className="ml-2 btn btn-white">Cancel</a>
                                    </Link>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    )
}

export async function getServerSideProps(context) {
    const user = await prisma.user.findFirst({
        where: {
          username: context.query.user,
        },
        select: {
            username: true,
            name: true,
            email:true,
            bio: true,
            avatar: true,
            eventTypes: true
        }
    });

const eventType = await prisma.eventType.findUnique({
        where: {
          id: parseInt(context.query.type),
        },
        select: {
            id: true,
            title: true,
            slug: true,
            description: true,
            length: true,
            locations: true,
            customInputs: true,
        }
    });

let booking = null;

if(context.query.rescheduleUid) {
        booking = await prisma.booking.findFirst({
            where: {
                uid: context.query.rescheduleUid
            },
            select: {
                description: true,
                attendees: {
                    select: {
                        email: true,
                        name: true
                    }
                }
            }
        });
    }

return {
        props: {
            user,
            eventType,
            booking
        },
    }
}