import React, {FunctionComponent, useState} from "react"
import _ from "lodash";
import {ImagesDB} from "/imports/api/Listings/client/collections/images";
import {Meteor} from "meteor/meteor";
import {ListingDetailGalleryModal} from "/imports/ui/components/modals/ListingDetailGalleryModal";
import {ListingDetailShareModal} from "/imports/ui/components/modals/ListingDetailShareModal";
import {UserImageAvatarContainer} from "/imports/ui/components/general/asdasd";
import CategoryNameContainer from "/imports/ui/containers/listings/CategoryNameContainer";
import withUser from "/imports/api/Users/trackers/with-user";
import {withTracker} from "meteor/react-meteor-data";

interface ListingDetailGalleryProps {
    listing: any
    isFavourite: boolean
    isLoggedIn: boolean
    setFormSubmitted: any
}


// @ts-ignore
const ProfilePicture = withTracker(({ _id }) => {
    let src = '';
    let file = ImagesDB.findOne({ _id });
    if(file) src = file.link();
    return { src };
    // @ts-ignore
})(({ src, name, occupation }) =>
    (
        <div className="user-image-with-side-details">
            <div className='user-image' style={{ backgroundImage: 'url(' + src +')'}} />
            <div className="user-details">
                <div className="mb-16 vertical-align-middle">
                    <i className="material-icons text-dark-mint">account_circle</i>
                    {name}
                </div>
                <div className="vertical-align-middle">
                    <i className="material-icons text-dark-mint">movie</i>
                    {/*@ts-ignore*/}
                    {occupation && occupation.length ? _.map(occupation, (occupation, index) => <span>{index !== 0 ? ", ":""} {occupation}</span>):"Not Specified"}
                </div>
            </div>
        </div>
    )
);

export const PersonalDetailsContainer = withUser(({ _id, profile }) => {
    if(!_id) return null;

    let profileIcon = <div />;

    let { first_name, last_name, occupation } = profile;

    if (profile) {
        if(profile.profile_image_id) {
            // @ts-ignore
            profileIcon = <ProfilePicture _id={profile.profile_image_id} name={(profile.first_name + " " + profile.last_name)} occupation={occupation} />
        } else if(profile.pictureUrl) {
            profileIcon = (
                <div className="user-image-with-side-details">
                    <div className='user-image' style={{ backgroundImage: 'url(' + profile.pictureUrl +')'}} />
                    <div className="user-details">
                        <div className="mb-16 vertical-align-middle">
                            <i className="material-icons text-dark-mint">account_circle</i>
                            {first_name + " " + last_name}
                        </div>
                        <div className="vertical-align-middle">
                            <i className="material-icons text-dark-mint">movie</i>
                            {/*@ts-ignore*/}
                            {occupation && occupation.length ? _.map(occupation, (occupation, index) => <span>{index !== 0 ? ", ":""} {occupation}</span>):"Not Specified"}
                        </div>
                    </div>
                </div>
            );
        } else {
            profileIcon = (
                <div className="user-image-with-side-details">
                    <div className='user-image' style={{ backgroundColor: "#84CEA3" }}>
                        {first_name.charAt(0) + "" + last_name.charAt(0)}
                    </div>
                    <div className="user-details">
                        <div className="mb-16 vertical-align-middle">
                            <i className="material-icons text-dark-mint">account_circle</i>
                            {first_name + " " + last_name}
                        </div>
                        <div className="vertical-align-middle">
                            <i className="material-icons text-dark-mint">movie</i>
                            {/*@ts-ignore*/}
                            {occupation && occupation.length ? _.map(occupation, (occupation, index) => <span>{index !== 0 ? ", ":""} {occupation}</span>):"Not Specified"}
                        </div>
                    </div>
                </div>
            );
        }
    }

    return (
        <React.Fragment>
            {profileIcon}
        </React.Fragment>
    )
});

const getDisplayAddress = (address: { description: string }) => {
    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();
    }
    return displayAddress;
}

export const ListingDetailGallery: FunctionComponent<ListingDetailGalleryProps> = ({ listing, setFormSubmitted, isFavourite, isLoggedIn }) => {

    const [showGallery, setShowGallery] = useState(false);
    const [showShowShareModal, setShowShareModal] = useState(false);

    const displayAddress = getDisplayAddress(listing.address);
    let photoCursors: any[] = [];
    if(listing.photos && listing.photos.length) {
        let sortedPhotos = listing.photos;
        if(listing.featured_photo_id) sortedPhotos = _.sortBy(listing.photos, (photo_id) => photo_id === listing.featured_photo_id ? 0:1);
        _.each(sortedPhotos, (_id) => {
            const file = ImagesDB.findOne({ _id });
            if(file) {
                photoCursors.push(file);
            }
        });
    }

    const isMobile = window.innerWidth < 768;
    // const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
    const isTheHost = listing.createdBy === Meteor.userId();
    const isShareDisabled = !listing.published || listing.status !== "active",
        isSaveDisabled = isTheHost || isShareDisabled;

    const url = window.location.href;

    const { styles, commercial_styles, car, aircraft, boat, motorbike, train, truck_bus_van } = listing;
    const displayStyle = styles && styles.length ? styles:(commercial_styles && commercial_styles.length ? commercial_styles:(car ? car:(aircraft ? aircraft:(boat ? boat:(motorbike ? motorbike:(train ? train:(truck_bus_van)))))));

    return <>
        <div className="listing-detail-slider-wrapper">
            <div className="grid-container">
                <div className="page-hero slider-container position-relative">
                    <button onClick={() => setShowGallery(true)} className="filmspace-listing-detail-button tour-button button white" disabled={false}>
                        <span className="material-icons text-light-grey">apps</span>&nbsp;
                        View Gallery
                    </button>
                    <div className="filmspace-action-buttons">
                        {isMobile ?
                            <>
                                {isLoggedIn &&
                                isFavourite ?
                                    <>
                                            <span onClick={() => {
                                                if (isSaveDisabled) {
                                                    return null;
                                                }
                                                Meteor.call("user.toggleListingFavourited", listing._id)
                                            }} className="material-icons text-rose">
                                                favorite
                                            </span>
                                    </>
                                    :
                                    <>
                                            <span onClick={() => {
                                                if (isSaveDisabled) {
                                                    return null;
                                                }
                                                Meteor.call("user.toggleListingFavourited", listing._id)
                                            }} className={"material-icons " + (isTheHost ? "text-light-grey":"text-white")}>
                                                favorite_border
                                            </span>
                                    </>
                                }
                                <div className="mt-20"/>

                                <span
                                    className={"material-icons" + (isShareDisabled ? " text-light-grey":" text-white")}
                                    onClick={() => {
                                        // Disable
                                        if (isShareDisabled) {
                                            return;
                                        }
                                        setShowShareModal(true);
                                    }}>share</span>
                            </>
                            :
                            <>
                                <button className="button white" disabled={isShareDisabled} onClick={() => {
                                    setShowShareModal(true);
                                }}>
                                    <span className="material-icons text-light-grey">share</span>&nbsp;
                                    Share
                                </button>
                                {isLoggedIn &&
                                <button disabled={isSaveDisabled} className="button white" onClick={() => Meteor.call("user.toggleListingFavourited", listing._id)}>
                                    {isFavourite ?
                                        <><span className="material-icons text-rose">favorite</span>&nbsp;Saved</>
                                        :
                                        <><span className="material-icons text-light-grey">favorite_border</span>&nbsp;Save Listing</>
                                    }
                                </button>
                                }
                            </>
                        }
                    </div>
                    {_.map(photoCursors, (cursor, index) => {
                        //The photoCursors array is sorted to have its first element always be the featured image id.
                        let styles = { display: "none" };
                        if (index === 0) {
                            // @ts-ignore
                            styles = { backgroundImage: `url(${cursor.link("large")})` };
                        }
                        if (index === 1) {
                            // @ts-ignore
                            styles = { backgroundImage: `url(${cursor.link("large")})`, left: "100%" };
                        }
                        if (index === 2) {
                            // @ts-ignore
                            styles = { backgroundImage: `url(${cursor.link("large")})`, right: "100%" };
                        }

                        return <div key={cursor._id} className={"feature-image " + (index === 0 ? "tns-slide-active":"")}
                                    style={styles}
                        >
                            {index === 0 &&
                            <div className="tns-controls">
                                <button onClick={() => setShowGallery(true)} className="prev"><span className="material-icons">keyboard_arrow_left</span></button>
                                <button onClick={() => setShowGallery(true)} className="next"><span className="material-icons">keyboard_arrow_right</span></button>
                            </div>
                            }
                        </div>
                    })}
                </div>
            </div>
        </div>

        <div className='bg-off-white filmspace-details'>
            <div className="padding-vertical-24 details-container">
                <div className='grid-container'>
                    <div className='grid-x grid-margin-x'>
                        <div className="cell medium-6 large-8 whitespace-nowrap">
                            <UserImageAvatarContainer userId={listing.createdBy} />

                            <div className='display-inline-block vertical-align-middle listing-name-address'>
                                <h2 onClick={() => setFormSubmitted(false)} className='title'>{listing.name}</h2>
                                <h3 className='sub-title'>{displayAddress}</h3>
                            </div>

                            {
                                listing.numberOfReviews && listing.numberOfReviews > 0 ?
                                    <div className='listing-rating ml-16 vertical-align-middle'>
                                        <i className='material-icons text-honey mr-8'>star</i>
                                        {(Math.round(listing.reviews.meanOverall * 2) / 2).toFixed(1)}
                                        <span className=' display-inline-block text-grey ml-16'>({listing.reviews.numberOfReviews} Reviews)</span>
                                    </div>
                                    :
                                    null
                            }
                        </div>
                        <div className="cell medium-6 large-4">
                            <div className='listing-categories hide-for-small-only'>
                                <div className="listing-type truncate mt-8">
                                    <i className='material-icons text-dark-mint mr-8'>account_balance</i>
                                    {
                                        listing.subcategories && listing.subcategories.length > 1 ?
                                            _.map(listing.subcategories, (key, index) => <CategoryNameContainer key={key} _id={listing.subcategories && listing.subcategories.length ? listing.subcategories[index]:undefined} />):
                                            listing.subcategories ? <CategoryNameContainer single={true} _id={listing.subcategories[0]} />:null
                                    }
                                </div>
                                {
                                    (displayStyle && displayStyle.length) ?
                                        <div className="listing-style truncate mt-8">
                                            <i className='material-icons text-dark-mint mr-8'>group</i>
                                            {listing.maxAttendees ? `${listing.maxAttendees} People`:"Check listing's pricing "}
                                        </div>
                                        :
                                        null
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        {showGallery &&
        <ListingDetailGalleryModal
            {...listing}
            photoCursors={photoCursors}
            displayAddress={displayAddress}
            onClose={() => setShowGallery(false)}
        />}

        {showShowShareModal &&
        <ListingDetailShareModal
            url={url}
            onClose={() => setShowShareModal(false)}
        />}
    </>
}