import React, {FunctionComponent} from "react"
import Toggle from "/imports/ui/components/general/Toggle";
import {ViewEditBookingForm} from "/imports/ui/pages/listings/detail/ViewEditBookingForm";

interface ActivitiesWidgetProps {
    userId: string
    additional_fees: Array<any>
    bookingDetails: any
    listingId: string
    formSubmitted: boolean
    toggleBookingForm: (arg: boolean) => void
    attendees: number
    listing: any
}

export const ActivitiesWidget: FunctionComponent<ActivitiesWidgetProps> = ({ userId, listing, attendees, additional_fees, bookingDetails, listingId, revealRef, toggleBookingForm }) => {

    const isMobile = window.innerWidth < 768;

    return <Toggle>
        {(toggled: any, toggle: React.MouseEventHandler<HTMLButtonElement> | undefined) => (
            toggled || !isMobile ?
                <div className="listing-profile-side-menu-component">

                    <div className="ios-bug-fix-for-overhang-position-fixed-error">
                        <div style={{ paddingLeft: 24 }}>
                            <ViewEditBookingForm
                                listingId={listingId}
                                additional_fees={additional_fees}
                                userId={userId}
                                bookingDetails={bookingDetails}
                                toggleBookingForm={toggleBookingForm}
                                revealRef={revealRef}
                                attendees={attendees}
                                listing={listing}
                            />
                        </div>
                    </div>

                    <button onClick={toggle} className="close-mobile-side-menu-button">
                        <i className="material-icons text-white">close</i>
                    </button>

                    <div className="prompt" style={{ marginTop: 90, marginLeft: 24 }}>
                        <i className="material-icons text-honey">info</i>
                        <h4 className="font-bold">Protect your Payments</h4>
                        <p>
                            Never pay or accept payment for a booking outside of the Everyspace platform. Only bookings & communication completed through the platform will have access to secure payment & payouts, R1 million liability cover & cancellation protection.
                        </p>
                    </div>

                </div>
                :
                <div className="padding-vertical-1 bg-off-white fixed-bottom">
                    <div className="grid-container">
                        <button onClick={toggle} className="button mint expanded  margin-bottom-0">EDIT SHOOT INFO</button>
                    </div>
                </div>

        )}
    </Toggle>
}