import React from 'react';
import numeral from "numeral";
import DashboardCalloutBlock from "../DashboardCalloutBlock";
import {useTracker} from "meteor/react-meteor-data";
import { BookingService } from "../../../../../api/Bookings/both/services/BookingService";
import {ListingsDB} from "../../../../../api/Listings/both/collections/listings";
import TinySliderCenteredNavWrapper from "../../../../components/general/TinySliderCenteredNavWrapper";
import _ from "lodash";
import {ImagesDB} from "../../../../../api/Listings/client/collections/images";
import {BookingStatusEnums} from "../../../../../api/Bookings/both/collections/bookings";
import moment from "moment";
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

export const UpcomingBookingsPage = () => {

    const bookingsService = useTracker(() => new BookingService().fetch(), []);
    const allUserAssociatedBookings = bookingsService.getBookings();

    const bookings = _.filter(allUserAssociatedBookings, { status: BookingStatusEnums.APPROVED });

    return (
        <>
            <div className="dashboard-page-header">
                <h4 className="text-mint">Upcoming Bookings</h4>
                <h1 className="text-charcoal">Bookings</h1>
            </div>

            {
                bookings.length ?
                    <div className="dashboard-page-body">
                        <div className="dashboard-page-scroller dashboard-page-body-padding margin-bottom-100-moz">
                            <div className="safari-border-radius-fix">
                                {_.map(bookings, (booking) => {
                                    const { _id, listingId, crewSize, attendees, activityType, timeslots, pricing } = booking;
                                    const { photos, address, name, createdBy, featured_photo_id  } = ListingsDB.findOne({ _id: listingId });

                                    //PhotoCursor display logic
                                    let photoCursors = [];
                                    if(photos && photos.length) {
                                        let sortedPhotos = photos;
                                        if(featured_photo_id) sortedPhotos = _.sortBy(photos, (photo_id) => photo_id === featured_photo_id ? 0:1);
                                        _.each(sortedPhotos, (_id) => {
                                            const file = ImagesDB.findOne({ _id });
                                            if(file) {
                                                photoCursors.push(file);
                                            }
                                        });
                                    }

                                    //address display logic
                                    let displayAddress = '';
                                    if(address) {
                                        let addressParts = _.filter(address.description.split(','), (word) => _.isNaN(parseInt(word)));
                                        displayAddress = addressParts.length >= 3 ?
                                            addressParts.splice(addressParts.length - 3, 2).join(',').trim()
                                            :
                                            addressParts.join(',').trim();
                                    }

                                    //timeslots display logic
                                    ////Days logic
                                    let startDay = timeslots[0].day;
                                    let endDay = timeslots[timeslots.length - 1].end;
                                    startDay = moment(startDay).format("MMMM DD, YYYY");
                                    endDay = moment(endDay).format("MMMM DD, YYYY");
                                    ////Times logic
                                    let formattedTimes = [];
                                    for (let i = 0; i < timeslots.length; i++) {
                                        let start = timeslots[i].start;
                                        let end = timeslots[i].end;

                                        start = moment(start).format("hA");
                                        end = moment(end).format("hA");

                                        formattedTimes.push({ start, end });
                                    }

                                    const isHost = createdBy === Meteor.userId();

                                    let price;
                                    if (isHost) {
                                        price = pricing.payout;
                                    } else price = pricing.total;

                                    return (
                                        <div className="listing-card listing-booking-card" key={_id}>
                                            <div className='grid-x'>
                                                <div className='cell br-768-shrink'>
                                                    <div className="listing-card-banner booking-heights">
                                                        <div className="listing-image-slider position-relative">
                                                            <TinySliderCenteredNavWrapper id={'listings-slider-' + listingId + _id} photoCursors={photoCursors} version={"small"} />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="cell br-768-auto">
                                                    <a className="no-anchor-styles height-100" href={FlowRouter.path("ApprovedBookingDetail", { bookingId: _id })}>
                                                        <div className="body-container">
                                                            <div className={"tag bg-dark-mint text-white"}>
                                                                BOOKING CONFIRMED
                                                            </div>
                                                            <div className="title text-charcoal">
                                                                {name}
                                                            </div>
                                                            <div className="sub-title text-mint">
                                                                {displayAddress}
                                                            </div>

                                                            <div className="icon-left-list-item">
                                                                <i className="material-icons">date_range</i>
                                                                {startDay} - {endDay}
                                                            </div>
                                                            <div className="icon-left-list-item">
                                                                <i className="material-icons">access_time</i>
                                                                {_.map(formattedTimes, ({ start, end }, index) => {
                                                                    if (index >= 4) return;
                                                                    if (index === formattedTimes.length - 1) return (
                                                                        <span key={index}>
                                                                            {start} - {end}
                                                                        </span>
                                                                    );
                                                                    else return (
                                                                        <span key={index}>
                                                                            {start} - {end} <span className="dot" />
                                                                        </span>
                                                                    )
                                                                })}
                                                            </div>

                                                            {activityType ?
                                                                <div className="icon-left-list-item margin-bottom-0">
                                                                    <i className="material-icons">camera</i>
                                                                    {activityType} ({attendees} people)
                                                                </div>
                                                                :
                                                                <div className="icon-left-list-item margin-bottom-0">
                                                                    <i className="material-icons">camera</i>
                                                                    Film Shoot {crewSize && `(${crewSize})`}
                                                                </div>
                                                            }

                                                            <div className="price-container">
                                                                {isHost ? "Payout":"Total"}: R {numeral(price).format("0,0.00")}
                                                            </div>

                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    </div>
                    :
                    <DashboardCalloutBlock />
            }
        </>
    );
};