import { Host, h } from "@stencil/core";
import { fb } from '../../utils/utils';
import { cdnAsset, formatCurrency } from '../../utils/utils';
export class BbListing {
    constructor() {
        this.overlay = {
            kind: '',
            selected: 0,
        };
    }
    get listingId() {
        // Allow for pretty urls where the id is at the end
        return this.listingPath.split('-').pop();
    }
    async componentDidLoad() {
        // Handles is a list so we must do a query and grab the first item
        this.listingSnaphot = await fb.firestore().collection('listings').doc(this.listingId).get();
    }
    render() {
        console.log(this.listingSnaphot);
        if (!this.listingSnaphot)
            return h(Host, null, "Loading...");
        if (!this.listingSnaphot.exists)
            return h(Host, null, "Missing");
        const listing = this.listingSnaphot.data();
        const specs = listing.specifications || {};
        const media = listing.media || [];
        const content = listing.content || [];
        const primaryMedia = listing.media[0];
        const selectedMedia = this.overlay && listing.media[this.overlay.selected];
        const primaryVariant = listing.variants && listing.variants[0];
        const shortTitle = ([specs.year, specs.manufacturer, specs.model]).filter(Boolean);
        return (h(Host, null,
            h("div", null,
                h("div", { class: "heading-container" },
                    h("div", { class: "large-heading", style: { margin: '1rem', flex: '1', flexDirection: 'column', alignItems: 'center' } },
                        h("button", { style: { margin: '1rem', appearance: 'none', borderRadius: '100%', border: '1px solid #eee', background: 'white', padding: '0' } },
                            h("img", { style: { borderRadius: '100%', width: '8rem', height: '8rem' }, src: "https://gravatar.com/avatar/b6de1b5951e1ab139a39968f907c4f77?d=mp" })),
                        h("h2", { style: { fontSize: '1.25rem', fontWeight: '500', margin: '0.25rem' } }, shortTitle.join(' · ')),
                        listing.location && h("div", { style: { marginBottom: '1rem', display: 'flex', fontSize: '0.9rem', fontWeight: '500', opacity: '0.5' } },
                            h("ion-icon", { name: "pin", style: { opacity: '0.25' } }),
                            listing.location),
                        h("div", { style: { flex: 'auto' } }),
                        listing.message && h("strong", { style: { fontWeight: '500', color: 'red', letterSpacing: '-0.05rem', fontSize: '0.75rem', textTransform: 'uppercase' } }, listing.message),
                        primaryVariant && primaryVariant.amount != 0 && h("strong", { style: { fontSize: '1.5rem', fontWeight: '600' } }, formatCurrency(primaryVariant.amount, primaryVariant.currency)),
                        h("button", { onClick: () => this.overlay = { kind: 'contact' }, style: { appearance: 'none', outline: 'none', margin: '1rem', fontSize: '1rem', background: 'white', borderRadius: '2rem', padding: '0.5rem 1.5rem', color: '#666', border: '1px solid #eee' } },
                            "Contact",
                            listing.profile && listing.profile.data && listing.profile.data.name && ` ${listing.profile.data.name}`)),
                    h("div", { class: "small-heading", style: { margin: '0 1rem' } },
                        h("div", { style: { fontWeight: '600' } }, shortTitle.join(' · ')),
                        h("div", { style: { color: 'inherit', opacity: '0.5', fontWeight: '400' } }, listing.location)),
                    primaryMedia && h("div", { onClick: () => this.overlay = { kind: 'media', selected: 0 }, style: { flex: '1.5', margin: '1rem' } },
                        primaryMedia.info.resource_type == 'image' && h("img", { class: "hover-zoom", style: { boxShadow: '0 0 1rem rgba(25,50,100,0.2)', borderRadius: '0.5rem', display: 'block', margin: 'auto', maxWidth: '100%', maxHeight: '80vh' }, src: cdnAsset(primaryMedia.info, 'jpg', 't_large_image') }),
                        primaryMedia.info.resource_type == 'video' && h("video", { class: "hover-zoom", style: { boxShadow: '0 0 1rem rgba(25,50,100,0.2)', borderRadius: '0.5rem', display: 'block', margin: 'auto', maxWidth: '100%', maxHeight: '80vh' }, poster: cdnAsset(primaryMedia.info, 'jpg', 't_large_image'), controls: true },
                            h("source", { src: cdnAsset(primaryMedia.info, 'm3u8', 't_streaming_video'), type: "application/x-mpegURL" }),
                            h("source", { src: cdnAsset(primaryMedia.info, 'mp4', 't_progressive_video'), type: "video/mp4" })))),
                h("div", { style: { margin: '2rem' } },
                    h("h1", { style: { fontSize: '1.75rem', fontWeight: '700', margin: '0.5rem 0' } }, listing.title),
                    h("p", { style: { margin: '1rem 0', maxWidth: '50rem', opacity: '0.5', fontSize: '1.25rem', fontFamily: 'serif', fontStyle: 'italic' } }, listing.summary)),
                h("div", { style: {} },
                    h("ul", { class: "specs" },
                        specs.category && h("li", null,
                            h("h3", null, "Category"),
                            h("span", null, specs.category)),
                        specs.classification && h("li", null,
                            h("h3", null, "Classification"),
                            h("span", null, specs.classification)),
                        specs.manufacturer && h("li", null,
                            h("h3", null, "Manufacturer"),
                            h("span", null, specs.manufacturer)),
                        specs.model && h("li", null,
                            h("h3", null, "Model"),
                            h("span", null, specs.model)),
                        specs.designer && h("li", null,
                            h("h3", null, "Designer"),
                            h("span", null, specs.designer)),
                        specs.builder && h("li", null,
                            h("h3", null, "Builder"),
                            h("span", null, specs.builder)),
                        specs.loa ? h("li", null,
                            h("h3", null, "Length Overall"),
                            h("span", null,
                                specs.loa.toFixed(2),
                                " ",
                                h("small", null, "m"))) : null,
                        specs.lwl ? h("li", null,
                            h("h3", null, "Length At Waterline"),
                            h("span", null,
                                specs.lwl.toFixed(2),
                                " ",
                                h("small", null, "m"))) : null,
                        specs.beam ? h("li", null,
                            h("h3", null, "Beam"),
                            h("span", null,
                                specs.beam.toFixed(2),
                                " ",
                                h("small", null, "m"))) : null,
                        specs.draft ? h("li", null,
                            h("h3", null, "Draft"),
                            h("span", null,
                                specs.draft.toFixed(2),
                                " ",
                                h("small", null, "m"))) : null,
                        specs.hoa ? h("li", null,
                            h("h3", null, "Height Above Waterline"),
                            h("span", null,
                                specs.haw.toFixed(2),
                                " ",
                                h("small", null, "m"))) : null,
                        specs.profile && h("li", null,
                            h("h3", null, "Profile"),
                            h("span", null, specs.profile)),
                        specs.material && h("li", null,
                            h("h3", null, "Material"),
                            h("span", null, specs.material)),
                        specs.displacement ? h("li", null,
                            h("h3", null, "Displacement"),
                            h("span", null,
                                specs.displacement.toFixed(2),
                                " ",
                                h("small", null, "kg"))) : null,
                        specs.weight ? h("li", null,
                            h("h3", null, "Weight"),
                            h("span", null,
                                specs.weight.toFixed(2),
                                " ",
                                h("small", null, "kg"))) : null,
                        specs.propulsion && h("li", null,
                            h("h3", null, "Propulsion"),
                            h("span", null, specs.propulsion)),
                        specs.engines ? h("li", null,
                            h("h3", null, "Engines"),
                            h("span", null, specs.engines)) : null,
                        specs.power ? h("li", null,
                            h("h3", null, "Engine Power"),
                            h("span", null,
                                specs.power.toFixed(2),
                                " ",
                                h("small", null, "kw"))) : null,
                        specs.fuelcapacity ? h("li", null,
                            h("h3", null, "Fuel Capacity"),
                            h("span", null,
                                specs.fuelcapacity.toFixed(2),
                                " ",
                                h("small", null, "l"))) : null,
                        specs.watercapacity ? h("li", null,
                            h("h3", null, "Water Capacity"),
                            h("span", null,
                                specs.watercapacity.toFixed(2),
                                " ",
                                h("small", null, "l"))) : null,
                        specs.berths ? h("li", null,
                            h("h3", null, "Berths"),
                            h("span", null, specs.berths)) : null,
                        specs.cabins ? h("li", null,
                            h("h3", null, "Cabins"),
                            h("span", null, specs.cabins)) : null,
                        specs.certification && h("li", null,
                            h("h3", null, "Certification"),
                            h("span", null, specs.certification)),
                        specs.hullid && h("li", null,
                            h("h3", null, "Hull Id"),
                            h("span", null, specs.hullid)),
                        specs.registry && h("li", null,
                            h("h3", null, "Registery"),
                            h("span", null, specs.registry)),
                        specs.name && h("li", null,
                            h("h3", null, "Name"),
                            h("span", null, specs.name)))),
                h("div", { style: { margin: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                    h("div", { style: { flex: 'none', display: 'flex', flexWrap: 'wrap' } }, media.map((m, i) => (h("img", { class: "hover-zoom", onClick: () => { this.overlay = { kind: 'media', selected: i }; }, style: { borderRadius: '3px', flex: 'none', objectFit: 'cover', width: '23%', margin: '1%' }, src: m.info.thumbnail_url }))))),
                h("div", { style: { margin: '2rem', fontSize: '1rem', lineHeight: '1.4rem' } }, content.map(({ kind, text }) => h("div", null, kind == 'text' && text.split(/[\r?\n|\r]\s*[\r?\n|\r]/).map(p => h("p", null, p)))))),
            this.overlay && this.overlay.kind == 'contact' && h("div", { onClick: () => { this.overlay = null; }, style: { position: 'fixed', zIndex: '999999', top: '0', left: '0', width: '100%', height: '100%', background: 'rgba(255,255,255,0.8)', backdropFilter: 'blur(5px)' } },
                h("form", { style: { display: 'flex' } },
                    h("input", { name: "a", type: "hidden", value: Date.now() }),
                    h("input", { name: "b", type: "hidden", value: Date.now() }),
                    h("input", { name: "c", type: "hidden" }),
                    h("div", null,
                        h("input", { style: { display: 'block' }, placeholder: "Name" }),
                        h("input", { style: { display: 'block' }, placeholder: "Email" }),
                        h("input", { style: { display: 'block' }, placeholder: "Telephone" })),
                    h("div", null,
                        h("textarea", { style: { display: 'block' }, placeholder: "Message" }),
                        h("button", { style: { display: 'block' }, type: "submit" }, "Send Message")))),
            this.overlay && this.overlay.kind == 'media' && h("div", { id: "mediaOverlay", style: { position: 'fixed', zIndex: '999999', top: '0', left: '0', width: '100%', height: '100%', background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(15px)' } },
                h("div", { style: { position: 'absolute', bottom: '0', width: '100%', height: '58px', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                    h("div", { style: { flex: 'none', display: 'flex', overflowX: 'auto' } }, media.map((m, i) => (h("img", { class: "gallery-thumb", onClick: () => { this.overlay = { kind: 'media', selected: i }; }, style: { cursor: 'pointer', borderRadius: '3px', margin: '2px', flex: 'none', objectFit: 'cover', width: '52px', height: '52px' }, src: m.info.thumbnail_url }))))),
                h("div", { key: this.overlay.selected, style: { position: 'absolute', left: '0', width: '100%', top: '60px', bottom: '60px', padding: '0 10px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' } },
                    selectedMedia.info.resource_type == 'image' && h("img", { onLoad: (ev) => ev.target.style.opacity = '1.0', style: { opacity: '0', transition: 'opacity 0.5s', borderRadius: '3px', boxShadow: '0 0 20px rgba(0,0,0,0.5)', display: 'block', margin: 'auto', maxWidth: '100%', maxHeight: '100%' }, src: cdnAsset(selectedMedia.info, 'jpg', 't_large_image') }),
                    selectedMedia.info.resource_type == 'video' && h("video", { onLoad: (ev) => ev.target.style.opacity = '1.0', style: { opacity: '0', transition: 'opacity 0.5s', borderRadius: '3px', boxShadow: '0 0 20px rgba(0,0,0,0.5)', display: 'block', margin: 'auto', maxWidth: '100%', maxHeight: '100%' }, autoplay: true, poster: cdnAsset(selectedMedia.info, 'jpg', 't_large_image'), controls: true },
                        h("source", { src: cdnAsset(selectedMedia.info, 'm3u8', 't_streaming_video'), type: "application/x-mpegURL" }),
                        h("source", { src: cdnAsset(selectedMedia.info, 'mp4', 't_progressive_video'), type: "video/mp4" }))),
                h("button", { onClick: () => this.overlay = null, style: { cursor: 'pointer', position: 'absolute', top: '3px', right: '3px', padding: '9px', borderRadius: '3px', appearance: 'none', border: 'none', background: 'rgba(0,0,0,0.1)', color: 'white' } },
                    h("ion-icon", { name: "close", size: "large" })),
                h("div", { style: { position: 'absolute', top: '5px', height: '50px', left: '60px', right: '60px', color: 'white', opacity: '0.9', display: 'block', textOverflow: 'ellipsis', fontWeight: '300', lineHeight: '16px', fontSize: '14px', textAlign: 'center', overflow: 'hidden', lineClamp: '3' } }, selectedMedia.description))));
    }
    static get is() { return "bb-listing"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bb-listing.css"]
    }; }
    static get styleUrls() { return {
        "$": ["bb-listing.css"]
    }; }
    static get properties() { return {
        "listingPath": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "listing-path",
            "reflect": false
        },
        "history": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "history",
            "reflect": false
        }
    }; }
    static get states() { return {
        "listingSnaphot": {},
        "overlay": {}
    }; }
}
