import React, {FunctionComponent, useState} from "react"
import _ from "lodash";
import TinySliderCenteredNavWrapper from "/imports/ui/components/general/TinySliderCenteredNavWrapper";
import {Portal} from "/imports/ui/components/modals/Portal";

interface ListingDetailGalleryModalProps {
    name: string
    displayAddress: string
    _id: string
    imageId: string
    photoCursors: Array<any>
    featured_photo_id: string
    onClose: () => void
}

export const ListingDetailGalleryModal: FunctionComponent<ListingDetailGalleryModalProps> = ({ name, displayAddress, _id, photoCursors, onClose }) => {

    const [selectedImageId, setSelectedImageId] = useState(photoCursors[0]._id);
    const [activeIndex, setActiveIndex] = useState(0);

    return <Portal>
        <div className={"gallery-reveal"}>
            <div className="">
                <div className="gallery-padding-controller">
                    <div className="gallery-title">
                        <h2 className="reveal-title bg-print">{name}</h2>
                        <div />
                        <h4 className="reveal-subtitle text-dark-mint bg-print">{displayAddress}</h4>
                    </div>

                    <a
                        href={"/download-watermarked?imageId=" + selectedImageId + "&listingId=" + _id}
                        className="button mint expanded box-shadow-button hide-for-br-768-up"
                        style={{ marginBottom: 24 }}>
                        Download
                    </a>
                </div>

                <div className="gallery-carousel-container">
                    <a
                        href={"/download-watermarked?imageId=" + selectedImageId + "&listingId=" + _id}
                        className="filmspace-listing-detail-button tour-button button white font-semi-bold">
                        <span className="material-icons text-mint">file_download</span>&nbsp;
                        Download
                    </a>

                    <div className="gallery-preview-blocks-container">
                        {_.map(photoCursors, (cursor, index) => {
                            return <div
                                    key={cursor._id}
                                    onClick={() => {
                                        setSelectedImageId(cursor._id);
                                        setActiveIndex(index);
                                    }}
                                    className={"preview " + (selectedImageId === cursor._id || (selectedImageId === "" && index === 0) ? "selected":"")}
                                    style={{backgroundImage: 'url(' + cursor.link("thumbnail") + ')', transform: "translateX(" + -activeIndex * 90 + "px)" }}
                                />

                        })}
                    </div>
                    <TinySliderCenteredNavWrapper
                        photoCursors={photoCursors}
                        id={'listings-slider-' + _id}
                        version={"large"}
                        activeIndex={activeIndex}
                        setActiveIndex={(index: any) => setActiveIndex(index)} onNavClick={setSelectedImageId}
                    />
                </div>

                <button className="close-reveal" onClick={onClose}>
                    <i className="material-icons text-charcoal">close</i>
                </button>
            </div>
        </div>
    </Portal>
}