var vexInstance;

const query = {...deserialize(location.search)};

const place = {
    currentFood: null,
    init: function() {
        fetchPlaceApi().then(response => {
            this.foodItems = response.place.food;
            this.filtered = response.place.food;
            this.categories = response.place.category

            delete response['food'];
            this.place = response.place;
            this.foodWrapper = document.querySelector('#food-container');
            document.getElementById('place-details').innerHTML = detailsTemplate(this.place);
            this.filterInput = document.querySelector('.filter-food')
            this.clearFilterText = document.querySelector('.clear-text')
            // document.getElementById('hero-name').innerHTML = this.place.name;
            this.loadItems();
            this.setUpListeners();
        });
    },
    setUpListeners: function() {

        document.addEventListener('click', e => {
            if(e.target.matches('.open-comments')) {
                this.getComments(e)
            }
        })
        document.querySelector('.filter-food').addEventListener('keyup', this.filterItems.bind(this))
    },
    loadItems: function() {
        this.foodWrapper.innerHTML = this.filtered ? this.filtered.sort(compare).map((food, i) => foodTemplate(food, i, this.place.slug)).join("") : "";

    },
    filterItems: function(e) {
        const inp = e.target.value;
        const newItems = [...this.foodItems].filter(item => item.name.toLowerCase().includes(inp.toLowerCase()));
        this.filtered = newItems;
        this.loadItems();
    },
    getComments: function(e) {
        e.preventDefault();
        this.fetchPage(`/reviews/${this.place.slug}`);
    },
    fetchPage: async function(link) {
        var temp = await doFetch(link, {
            redirect: 'follow',
            headers: {
                'Content-Type': 'text/plain',
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        load.style.display = "none";
        vexInstance = vex.open({
            unsafeContent: temp.payload,
            showCloseButton: false
        });
        document.addEventListener('submit', this.post)
    }
}

document.addEventListener('click', function(e){
    if(e.target.matches('.go-back')){
        const prev = document.referrer;
        if(prev.includes('cravvings.com')){
            window.history.back();
        }else {
            window.location.href = "/search";
        }
    }
});

const compare = (a, b) => {
    if (query.q) {
        if (a.name.toLowerCase().includes(query.q.toLowerCase())) {
            return -1;
        } else {
            return 1;
        }
    }
}

place.init();

const phones = (phone) => `
    <a href="tel:${phone}">
        <svg stroke="currentColor" fill="#222222" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M426.666 330.667a250.385 250.385 0 0 1-75.729-11.729c-7.469-2.136-16-1.073-21.332 5.333l-46.939 46.928c-60.802-30.928-109.864-80-140.802-140.803l46.939-46.927c5.332-5.333 7.462-13.864 5.332-21.333-8.537-24.531-12.802-50.136-12.802-76.803C181.333 73.604 171.734 64 160 64H85.333C73.599 64 64 73.604 64 85.333 64 285.864 226.136 448 426.666 448c11.73 0 21.334-9.604 21.334-21.333V352c0-11.729-9.604-21.333-21.334-21.333z"></path></svg>
        ${phone}
    </a>`

document.addEventListener('click', function(e){
    if(vex && vexInstance && e.target.matches('.close-modal')){
        vex.close(vexInstance)
    }
})

const deliverys = (delivery) => {
    if(delivery && delivery.length){
        return `
            <div class="place-delivery">
                <i class="fa fa-motorcycle"></i> <span class="delivery-loc">${delivery.map(area => area).join(", ")}</span>
            </div>
        `
    }
    return '';
}

const takeaway = (take) => {
    return take ? `<div>Pickup: <span class="check-mark"><i class="fa fa-check-square"></i></span></div>` : ''
}

function placeRating(rating){
    return `
        <div class="place-rating">
            Rating ${starred(rating)}
        </div>
    `
}

function getMapUrl(place) {
    const [long, lat] = place.coords;
    return `https://www.google.com/maps/search/${plusEncode(place.name)}/@${lat},${long},15z`;
}

function detailsTemplate(place) {
    let placeImage = place.image && place.image.length ? place.image[0] : 'https%3A%2F%2Fcravvings.com%2Fimages%2Fcard_1.jpg';
    const twitter = `https://twitter.com/share?url=https%3A%2F%2Fcravvings.com%2Fplaces%2F${place.slug}&text=See%20${place.name}%20on%20Cravvings`;
    const whatsapp = `https://wa.me/?text=See%20${place.name}%20on%20Cravvings%20via%20https%3A%2F%2Fcravvings.com/places/${place.slug}`;
    const facebook = `https://www.facebook.com/dialog/feed?&app_id=875457879311564&link=https%3A%2F%2Fcravvings.com%2Fplaces%2F${place.slug}&display=popup&quote=${place.name}%20on%20Cravvings&hashtag=#restaurantsinlagos`;

    return `
        <div class="place-header-content">
            <div class="title-header">
                <h1 class="name">${place.name}</h1>
                <p class="place-address"><span class="actual-address">${place.address}</span></p>
                <div class="open-map"><a href="${getMapUrl(place)}" target="_blank">View on map</a></div>
                ${deliverys(place.delivery)}
                ${takeaway(place.takeaway)}
                <div class="place-phones">
                    ${place.phones && place.phones.length ? place.phones.map(phone => phones(phone)).join(" ") : ''}
                </div>
            </div>
            <div class="review-header review-wrapper">

            </div>
        </div>
    `;
}

String.prototype.indexOfEnd = function(string) {
    var io = this.indexOf(string);
    return io == -1 ? -1 : io + string.length;
}

const starred = (avgRating) => {
    let rat = "";
    const avg = avgRating && avgRating.rate ? avgRating.rate : avgRating;
    for (var i = 0; i < Math.floor(avg); i++) {
        rat += `<i class="fa fa-star"></i>`;
    }

    return rat;
};

// console.log(capitalize("Rice and Beans"));

function foodTemplate(food, i, place_slug) {
    food.name = capitalize(food.name);
    // const avgRating = food.rating.rate ? ratings(food.rating) : null;
    let edited, editedDesc;
    if (query.q && food.name.toLowerCase().includes(query.q.toLowerCase())) {
        edited = highlight(food.name, query.q);
    }
    if (query.q && food.description.toLowerCase().includes(query.q.toLowerCase())) {
        editedDesc = highlight(food.description, query.q);
    }else {
        editedDesc = food.description;
    }

    var liked, color;
    // if ($user !== "0" && food.likes && food.likes.length) {
    //     liked = food.likes.includes($user);
    //     color = liked ? '#C32022' : '#ccc';
    // }else color = '#ccc';
    // <a href="#" class="like-food" data-id="${food._id}" data-type="food" style="color: ${color}">
    //     <i class="fa fa-heart"></i>
    // </a>

    function highlight(text, term) {
        // const end = text.indexOf(term.substring(term.length - 1)) + 1;
        const end = text.toLowerCase().indexOfEnd(term.toLowerCase());
        const start = text.toLowerCase().indexOf(term.toLowerCase());
        const toBeHighlighted = text.substring(start, end);
        const highlighted = `<span class="highlight">${toBeHighlighted}</span>`;
        return text.replace(toBeHighlighted, highlighted);
    }

    let img = food.img ?
        `<div class="food-img">
            <img src="${food.img}" />
        </div>` : '';
    let truncated, desc = '';
    if (editedDesc) {
        truncated = editedDesc.slice(0, 70);
        desc = `${truncated}${editedDesc > truncated ? '...' : ''}`
    }
    return `
                <div class="place-menu-item-container">
                    ${img}
                    <div class="place-menu-item food-item review-wrapper" data-id="${food._id}" data-index="${i}">
                        <div class="place-menu-name food-name">
                            <a data-name="${food.name}" data-type="food" class="rate-food review"  href="#">
                                ${edited ? edited : food.name}
                            </a>
                            <span style="display: block;color: #ffc700;">${starred(food.avg_rate)}</span>
                        </div>
                        <div class="place-menu-price">&#x20A6;${food.price || 0}</div>
                        <div class="place-menu-description">
                            ${desc.length > 3 ? desc : ""}
                        </div>
                        <div class="food-category">
                            ${food.category ? food.category : ''}
                        </div>

                    </div>
                </div>
            `;
}

const review = (placeReviews) => {
    const { rating, name } = placeReviews;
    const revs = rating.length === 1 ? 'review' : 'reviews';
    return `<a data-food="${name ? name : ''}" href="#modal" class="pull-right open-comments">${rating && rating.length} reviews</a>`;
}

document.addEventListener('click', function(e){
    if(e.target.matches('.nav-tabs .nav-link')) {
        e.preventDefault()
        document.querySelector('.nav-link.active').classList.remove('active');
        document.querySelector('.show').classList.remove('show', 'active');
        e.target.classList.add('active')
        const ges = e.target.getAttribute('href').split('#')[1];
        document.querySelector(`#${ges}`).classList.add('show', 'active')
    }
})