import React, {FunctionComponent, useState} from "react"
import {RequestBookingForm} from "/imports/ui/components/test/RequestBookingForm";
import Toggle from "/imports/ui/components/general/Toggle";
import {PreferredHours} from "/imports/ui/components/tooltips/PreferredHours";

interface ListingDetailsWidgetProps {
    listing: any
    setBookingDetails: (args: any) => any
    setFormSubmitted: () => void
    bookingDetails: any
}


// @ts-ignore
export const ListingDetailsWidget: FunctionComponent<ListingDetailsWidgetProps> = ({ listing, revealRef, setBookingDetails, setFormSubmitted, bookingDetails }) => {

    let [isOpen, setIsOpen] = useState(false);
    const isMobile = window.innerWidth < 768;

    const { pricing_tiers, additional_fees, uniformPricing, maxAttendees } = listing;

    let fees: any[] = [];

    if(pricing_tiers) {
        if(uniformPricing) {
            fees.push({ ...pricing_tiers[0], max: maxAttendees, label: `1 - ${maxAttendees} people` });
        } else {
            for(let tier of pricing_tiers) {
                fees.push({...tier, label: `${tier.min} - ${tier.max} people`});
            }
        }
    }

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

                    <div className="ios-bug-fix-for-overhang-position-fixed-error">
                        <div style={{ paddingLeft: 24 }}>
                            <RequestBookingForm
                                revealRef={revealRef}
                                listingId={listing._id}
                                listingStatus={listing.status}
                                listingPublished={listing.published}
                                fees={fees}
                                createdBy={listing.createdBy}
                                calendar={listing.calendar}
                                bookingDetails={bookingDetails}
                                setBookingDetails={setBookingDetails}
                                toggleBookingForm={setFormSubmitted}
                                additionalFees={additional_fees}
                            />
                        </div>
                    </div>

                    <button onClick={() => {
                        toggle();
                        setIsOpen(false);
                    }} 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="button-container-wrapper bg-off-white fixed-bottom">
                        <div className="grid-container">
                            <div className="flex-container-wrapper">
                                <div className="display-inline-block">
                                    <h2 className='text-charcoal'>R {fees[0].price} / hr</h2>
                                    <PreferredHours hours={fees[0].hours}  />
                                </div>

                                <button onClick={toggle} className="button honey margin-bottom-0" style={{ paddingLeft: 16, paddingRight: 16, marginRight: 8 }}>START BOOKING</button>

                                <button onClick={() => revealRef.current.open()} className="button mint margin-bottom-0" style={{ paddingLeft: 16, paddingRight: 16 }}>MESSAGE HOST</button>
                            </div>
                        </div>
                    </div>
                </>
        )}
    </Toggle>
}