import React, {FunctionComponent} from "react"
import {Portal} from "/imports/ui/components/modals/Portal";

interface ListingDetailShareModalProps {
    onClose: () => void
    url: string
}

export const ListingDetailShareModal: FunctionComponent<ListingDetailShareModalProps> = ({ onClose, url }) => {
    return <Portal>
        <div style={{ zIndex: 51, position: "relative" }}>
            <div className="dashboard-reveal share-reveal max-width-385" style={{ borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }}>
                <div className="reveal-header text-center reveal-header-pattern-green">
                    <div className="modal-icon">
                        <i className="material-icons">share</i>
                    </div>
                    <button className="button clear" onClick={onClose}>
                        <i className="material-icons">close</i>
                    </button>
                </div>

                <div className="reveal-body bg-white padding-bottom-0">
                    <h1 className="text-center font-semi-bold">Share This Space</h1>
                    <hr className="divider margin-bottom-0" />
                </div>

                <a target="_blank" className="share-medium-container" href={"https://www.facebook.com/sharer/sharer.php?u=" + url} >
                    <i className="fab fa-facebook-f" />
                    <span className="share-medium-name">Facebook</span>
                </a>

                <a target="_blank" className="share-medium-container" href={"https://twitter.com/home?status=" + url}>
                    <i className="fab fa-twitter" />
                    <span className="share-medium-name">Twitter</span>
                </a>

                <a target="_blank" className="share-medium-container" href={"https://api.whatsapp.com/send?text=" + "\n" +
                "Hey! Checkout this awesome space listing right over… here!   💚 " + url}>
                    <i className="fab fa-whatsapp" />
                    <span className="share-medium-name">Whatsapp</span>
                </a>

                <a className="share-medium-container" href={"mailto:?subject= Whoa! Check out this awesome space! 💚&body=Hey! 👋\n" +
                "Guess what? This totally awesome space is available to rent by the hour!\n " + url +
                " Take a look and let me know what you think: \n" +
                "Here’s to the next shoot! 🎬 🏡"}>
                    <i className="material-icons">mail_outline</i>
                    <span className="share-medium-name">Mail</span>
                </a>

                <button className="share-medium-container width-100 text-left" onClick={() => {
                    window.alert("Copied link to clipboard!");
                    navigator.clipboard.writeText(url);
                }}>
                    <i style={{ fontSize: 25 }} className="far fa-clone" aria-hidden={true} />
                    <span className="share-medium-name">Copy Link</span>
                </button>

                <div className="reveal-body bg-white padding-top-0">
                    <hr className="divider margin-top-0"/>
                    <button className="button honey expanded box-shadow-button" onClick={onClose}>Close</button>
                </div>
            </div>
        </div>

        <div onClick={onClose} className="reveal-cover" />

    </Portal>
}