import React, {useEffect, useRef, useState} from 'react';
import { Meteor } from 'meteor/meteor';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import {MessageThreads} from "/imports/api/Messaging/both/collections/message_threads";
import {PreBookingsDB} from "/imports/api/Bookings/both/collections/pre-bookings";
import {ListingReviewsSection} from "/imports/ui/components/reviews/ListingReviewsSection";
import {ListingDetailGallery} from "/imports/ui/components/listing-detail/ListingDetailGallery";
import GoogleMap from "/imports/ui/components/general/GoogleMap";
import {ListingFeatures} from "/imports/ui/components/listing-detail/ListingFeatures";
import {ListingDetailsWidget} from "/imports/ui/components/listing-detail/ListingDetailsWidget";
import {ActivitiesForm} from "/imports/ui/components/listing-detail/ActivitiesForm";
import {ActivitiesWidget} from "/imports/ui/components/listing-detail/ActivitiesWidget";
import {ContactHostNewMessageThreadReveal} from "/imports/ui/components/messages/ContactHostNewMessageThreadReveal";

const ListingDetail = ({ formSubmitted, bookingDetails, listing, setFormSubmitted, setBookingDetails }) => {

    const revealRef = useRef(null);
    const [attendees, setAttendees] = useState(bookingDetails.attendees);

    return <div className='listing-profile-padding-management'>

        <ContactHostNewMessageThreadReveal
            instance={(reveal) => revealRef.current = reveal}
            listingId={listing._id}
            initialValues={{}}
        />

        <div className='grid-container'>
            <div className="grid-x grid-margin-x">
                <div className="cell large-7 xlarge-8 br-768-6">
                    {formSubmitted
                        ? <ActivitiesForm setAttendees={(val) => setAttendees(val)} listing={listing} bookingDetails={bookingDetails} formSubmitted={formSubmitted} setBookingDetails={setBookingDetails} setFormSubmitted={setFormSubmitted} />
                        : <ListingFeatures listing={listing} revealRef={revealRef} />
                    }
                </div>
                <div className="cell large-5 xlarge-4 br-768-6">
                    {formSubmitted
                        ? <ActivitiesWidget revealRef={revealRef} attendees={attendees} listingId={listing._id} listing={listing} bookingDetails={bookingDetails} formSubmitted={formSubmitted} additional_fees={listing.additional_fees} userId={listing.createdBy} toggleBookingForm={() => setFormSubmitted(!formSubmitted)} />
                        : <ListingDetailsWidget revealRef={revealRef} listing={listing} bookingDetails={bookingDetails} setFormSubmitted={() => setFormSubmitted(!formSubmitted)} setBookingDetails={setBookingDetails} />
                    }
                </div>
            </div>
        </div>
    </div>
}

const ListingMap = ({ listing, showMap = true }) => {
    return <div>
        {showMap &&
            <>
                <div className='google-map'>
                    <GoogleMap lat={listing.address ? listing.address.coordinates[1]:0} lng={listing.address ? listing.address.coordinates[0]:0} zoom={ 15 } listingMap={true} />
                </div>
            </>
        }
    </div>
}

export const ListingDetailPage = ({ ready, listing, isFavourite, isLoggedIn }) => {

    const [formSubmitted, setFormSubmitted] = useState(false);
    const [bookingDetails, setBookingDetails] = useState({});

    useEffect(() => {
        if (ready) {
            Meteor.call("listings.ensureWatermarkedImages", listing._id);

            const {messageThreadId, preBookingId, paymentError} = FlowRouter.current().queryParams;

            if (preBookingId) {
                Meteor.subscribe("preBooking", preBookingId, () => {
                    const booking = PreBookingsDB.findOne({_id: preBookingId});
                    const {attendees, pricing, timeslots} = booking;

                    setFormSubmitted(true);
                    setBookingDetails({timeslots, pricing, attendees});
                });
            }

            if (messageThreadId) {
                Meteor.subscribe("Messages.Discussion", messageThreadId, () => {
                    const { bookingFormFields } = MessageThreads.findOne({_id: messageThreadId});
                    setFormSubmitted(true);
                    setBookingDetails({
                        timeslots: bookingFormFields.timeslots,
                        customRate: parseFloat(bookingFormFields.customRate),
                        canOverrideMinHours: bookingFormFields.flexibleDatesAndTime,
                        activityType: bookingFormFields.activityType
                    });
                });
            }
        }
    }, [ ready ]);

    if (!ready) {
        return <div/>
    }

    return <div className={"filmspace-listing-detail-page"}>
        <ListingDetailGallery listing={listing} setFormSubmitted={setFormSubmitted} isFavourite={isFavourite} isLoggedIn={isLoggedIn} />

        <ListingDetail
            listing={listing}
            bookingDetails={bookingDetails}
            formSubmitted={formSubmitted}
            setFormSubmitted={setFormSubmitted}
            setBookingDetails={setBookingDetails}
        />

        <ListingReviewsSection listingId={listing._id}/>

        <ListingMap listing={listing} showMap={true}/>

        <div className="hide-for-large padding-vertical-3" />

    </div>
}