import {Meteor} from "meteor/meteor"
import React, {FunctionComponent, useEffect, useState} from "react"
import StarRating from "/imports/ui/components/general/StarRating"
// @ts-ignore
import { FlowRouter } from "meteor/ostrio:flow-router-extra"
import {
    TinySliderCenteredNavWrapperFromFileRefsForMaps
} from "/imports/ui/components/general/TinySliderCenteredNavWrapperFromFileRefs";
import _ from "lodash";
import {getUrlFilters} from "/imports/ui/components/listings/search/utils/url-filters";
import {useTracker} from "meteor/react-meteor-data";

type MapCardListing = {
    _id: string
    name: string
    maxAttendees: number
    reviews: any
    price_min: any
    imageRefs: any
}

interface MapSearchCardProps {
    // listing: {
    //     _id: string
    //     name: string
    //     address: {
    //         description: string
    //     },
    //     attendees: number
    //     reviews: { meanOverall: number }
    //     pricing_tiers: PricingObject[]
    //     imageRefs: Array<ImageRef>
    // }
    listingId: string
    onClose: () => void
}

export const MapSearchCard: FunctionComponent<MapSearchCardProps> = ({ listingId, onClose }) => {
    const onFavoriteClick = () => {
        Meteor.call("user.toggleListingFavourited", listingId);
    };

    const [listing, setListing] = useState<MapCardListing | null>(null);
    const { _id, name, maxAttendees, reviews, price_min, imageRefs } = listing || {};

    let userFavourites = useTracker(() => Meteor.user()
        // @ts-ignore
        ? _.map(Meteor.user()?.favourites, ({ listingId }) => listingId)
        : [],
    []);

    const isFavourited = userFavourites.includes(listingId);

    const filters = useTracker(() => {
        FlowRouter.watchPathChange();
        return getUrlFilters();
    }, []);

    useEffect(() => {
        Meteor.call("listings.search.getListingForMapInfoWindow", listingId, filters, (_err: Meteor.Error, result: MapCardListing | null) => setListing(result))
    }, [ JSON.stringify(filters) ])

    let priceFrom = "";
    if(price_min) {
        priceFrom = price_min.toFixed(0);
    }

    const currentListingRating = reviews && reviews.meanOverall ? reviews.meanOverall:0;

    return (
        <div className={'listing-map-search-card'}>

            <div className="grid-x">
                <div className="cell medium-shrink large-12 position-relative">
                    <a className="position-absolute z-index-2" style={{ inset: "34px 0px 45px 0" }} target={"_blank"} href={FlowRouter.path("ListingDetail", { listingId: _id })} />
                    <div className="listing-card-banner">
                        <div className="listing-image-slider position-relative">
                            {imageRefs?.length ?
                                <TinySliderCenteredNavWrapperFromFileRefsForMaps
                                    setActiveIndex={console.log}
                                    onNavClick={console.log}
                                    key={_.map(imageRefs, ({_id}) => _id).join("")}
                                    id={'map-slider-' + _id}
                                    fileRefs={imageRefs}
                                    version={"small"} />
                                :
                                null
                            }
                        </div>

                        <div className="tag text-white bg-dark-mint show-for-large">From R{priceFrom} / HR</div>
                        {Meteor.userId() ?
                            <button className="favourite" onClick={onFavoriteClick}>
                                <i style={{ position: isFavourited ? 'absolute':'static' }} className='material-icons text-white'>favorite_border</i>
                                {isFavourited ?
                                    <i className='material-icons text-rose'>favorite</i>
                                    :
                                    null
                                }
                            </button>
                            :
                            null
                        }
                        <button className="close" onClick={onClose}>
                            <i className='material-icons text-white'>close</i>
                        </button>
                    </div>
                </div>
                <div className="cell medium-auto large-12">
                    <div className="content cursor-pointer-hover">
                        <a target={"_blank"} className={"text-charcoal"} href={FlowRouter.path("ListingDetail", { listingId: _id })}>
                            <div className="tag text-white bg-dark-mint hide-for-large">From R{priceFrom} / HR</div>
                            <h3 className='title'>{name}</h3>
                            <div className="rating-container">
                                <div className={"attendee-search-card"}>
                                    <i className="material-icons" style={{ marginRight: 4 }}>group</i> <span className={"text"}>{maxAttendees ? maxAttendees:"N/A"}</span>
                                </div>
                                {currentListingRating === 0 ? <span />:<StarRating currentRating={currentListingRating}/>}
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}