Elep

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)
    }
}

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`;
}

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"));

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);
    }

</div>
                </div>
            `;
}