import React, {FunctionComponent} from "react"
import _ from "lodash";

// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import SlashStyledCheckboxLabel from "/imports/ui/components/general/SlashStyledCheckboxLabel";
import {Meteor} from "meteor/meteor";

interface ListingFeaturesProps {
    listing: any
}

// @ts-ignore
export const ListingFeatures: FunctionComponent<ListingFeaturesProps> = ({ listing, revealRef }) => {



    const { messageThreadId } = FlowRouter.current().queryParams;

    const { description, additional_parking, extra_rule, land_area, furniture_movable, off_limits, bathroom_use,
        vehicles, parking, accessibility, bedrooms, bathrooms, kitchens, floor_area, floor, filming_size_width, filming_size_height,
        filming_size_length, amenities, createdBy
    } = listing;

    return <>

        {description ?
            <div className='charcoal-header-block'>
                About The Space
            </div>
            :
            null
        }

        {
            _.map(_.split(description, '\n'), (text, index) => {
                return (
                    <p key={`listing_features_description_${index}`} className='text-charcoal line-height-normal mt-12 mb-16' style={{ fontSize: 16 }}>
                        {text}
                    </p>
                )
            })
        }

        {
            amenities && amenities.length ?
                <React.Fragment>
                    <div className='charcoal-header-block mt-40'>
                        Amenities
                    </div>

                    <div className="grid-x grid-margin-x last-feature-no-border">
                        {
                            _.map(amenities, (amenity, index) => {
                                return (
                                    <div key={`amenities_listing_features_${index}`} className="cell medium-12">
                                        <div className="position-relative feature">
                                            <i className='material-icons text-mint icon icon-left'>check</i>
                                            {amenity}
                                        </div>
                                    </div>
                                );
                            })
                        }
                    </div>
                </React.Fragment>
                :
                null
        }

        <div className={"margin-vertical-1"}>
            Don't see something you're looking for? <button onClick={() => {
                if (!Meteor.user()) {
                    FlowRouter.go("Login");
                } else if(Meteor.userId() === createdBy) {
                    window.alert("You are the host!")
                } else if(messageThreadId) {
                    FlowRouter.go("InboxMessageThread", { threadId: messageThreadId })
                } else {
                    if (revealRef.current) {
                        // @ts-ignore
                        revealRef.current.open();
                        console.log(revealRef);
                    }
                    console.log(revealRef);
                }

        }} className="text-mint">Let's ask the host.</button>
        </div>

        {
            vehicles ?
                <React.Fragment>
                    <div className='charcoal-header-block mt-40'>
                        Parking & Accessibility
                    </div>

                    <div className="grid-x grid-margin-x last-feature-no-border">
                        {
                            vehicles ?
                                <div className="cell medium-12">
                                    <div className="position-relative feature">
                                        <i className='material-icons text-mint icon icon-left'>check</i>
                                        Private Parking for: { vehicles } Vehicles
                                    </div>
                                </div>
                                :
                                null
                        }
                        {
                            parking && parking.length ?
                                _.map(parking, (parking, index) => {
                                    return (
                                        <div key={`parking_listing_features_${index}`} className="cell medium-12">
                                            <div className="position-relative feature">
                                                <i className='material-icons text-mint icon icon-left'>check</i>
                                                Trucks / Caravan Parking: {parking}
                                            </div>
                                        </div>
                                    );
                                })
                                :
                                null
                        }
                        {
                            additional_parking ?
                                <div className="cell medium-12">
                                    <div className="position-relative feature">
                                        <i className='material-icons text-mint icon icon-left'>check</i>
                                        <SlashStyledCheckboxLabel>Additional parking lot / Parking structure nearby</SlashStyledCheckboxLabel>
                                    </div>
                                </div>
                                :
                                <div className="cell medium-12">
                                    <div className="position-relative feature">
                                        <i className='material-icons text-rose icon icon-left'>close</i>
                                        <SlashStyledCheckboxLabel>No additional parking lot / Parking structure nearby</SlashStyledCheckboxLabel>
                                    </div>
                                </div>
                        }
                        {
                            accessibility && accessibility.length ?
                                <div className="cell medium-12">
                                    <div className="position-relative feature">
                                        <i className='material-icons text-mint icon icon-left'>check</i>
                                        Access: {accessibility.join(", ")}
                                    </div>
                                </div>
                                :
                                null
                        }
                    </div>

                </React.Fragment>
                :
                null
        }

        {
            <React.Fragment>
                {
                    bedrooms || bathrooms || kitchens || floor_area || land_area || floor || filming_size_height || filming_size_width || filming_size_length ?
                        <div className='charcoal-header-block mt-24'>
                            Details
                        </div>
                        :
                        null
                }

                <div className="grid-x grid-margin-x last-feature-no-border">
                    {
                        bedrooms ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Bedrooms: { bedrooms }
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        bathrooms ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Bathrooms: { bathrooms }
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        kitchens ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Kitchens: { kitchens }
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        floor_area ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Floor area: { floor_area } m<sup>2</sup>
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        land_area ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Land area: { land_area } m<sup>2</sup>
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        floor ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Main Floor Number: { floor }
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        filming_size_length ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Filming Area Size Length: { filming_size_length } cm
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        filming_size_width ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Filming Area Size Width: { filming_size_width } cm
                                </div>
                            </div>
                            :
                            null
                    }
                    {
                        filming_size_height ?
                            <div className="cell medium-12">
                                <div className="position-relative feature">
                                    <i className='material-icons text-mint icon icon-left'>check</i>
                                    Filming Area Size Height: { filming_size_height } cm
                                </div>
                            </div>
                            :
                            null
                    }

                </div>
            </React.Fragment>
        }

        {
            off_limits && off_limits.length ?
                <React.Fragment>
                    <div className='charcoal-header-block mt-40'>
                        Restricted Areas
                    </div>

                    <div className="grid-x grid-margin-x last-feature-no-border">
                        {
                            off_limits && off_limits.length ?
                                _.map(off_limits, (off_limits, index) => {
                                    return (
                                        <div key={`off_limits_listing_features_${index}`} className="cell medium-12">
                                            <div className="position-relative feature">
                                                <i className='material-icons text-rose icon icon-left'>close</i>
                                                {off_limits}
                                            </div>
                                        </div>
                                    );
                                })
                                :
                                null
                        }
                    </div>
                </React.Fragment>
                :
                null
        }


        <React.Fragment>
            {
                extra_rule && extra_rule.length ?
                    <div className='charcoal-header-block mt-40'>
                        Host Rules
                    </div>
                    :
                    null
            }

            <div className="grid-x grid-margin-x last-feature-no-border">
                {
                    extra_rule && extra_rule.length ?
                        _.map(extra_rule, (extra_rule, index) => {
                            return (
                                <div key={`extra_rules_listing_features_${index}`} className="cell medium-12">
                                    <div className="position-relative feature">
                                        <i className='material-icons text-rose icon icon-left'>close</i>
                                        {extra_rule}
                                    </div>
                                </div>
                            );
                        })
                        :
                        null
                }
                {
                    bathroom_use ?
                        <div className="cell medium-12">
                            <div className="position-relative feature">
                                <i className='material-icons text-mint icon icon-left'>check</i>
                                Restroom use for attendees allowed
                            </div>
                        </div>
                        :
                        <div className="cell medium-12">
                            <div className="position-relative feature">
                                <i className='material-icons text-rose icon icon-left'>close</i>
                                Restroom use for attendees not allowed
                            </div>
                        </div>
                }
                {
                    furniture_movable ?
                        <div className="cell medium-12">
                            <div className="position-relative feature">
                                <i className='material-icons text-mint icon icon-left'>check</i>
                                Furniture can be Moved
                            </div>
                        </div>
                        :
                        <div className="cell medium-12">
                            <div className="position-relative feature">
                                <i className='material-icons text-rose icon icon-left'>close</i>
                                Furniture cannot be Moved
                            </div>
                        </div>
                }
            </div>
        </React.Fragment>
    </>
}