Elep

var ac, vexInstance;
var commentBox = document.querySelector(".rating-comment textarea");
var pageForm = document.querySelector(".search-page-form");
const foodSelectContainer = document.querySelector(".food-input");

const noResult = (text) => {
    return  [
      {name: text, slug: ""}
    ]
}

const postReview = ({status, message}, form) => {
    load.style.display = 'none';

if(status === 'success'){
        form.reset();
        showFlash(message, 'success');
        document.getElementById("img-source").innerHTML = "";
        placeName = placeSlug = "";
        window.location.href = '/user/profile#/reviews';
    }
    // window.location.href = '/user/profile#/reviews';
}

foodSelectContainer.querySelector('small') && (foodSelectContainer.querySelector('small').innerHTML = `Leave blank to review ${placeName}`)
    document.querySelector(".add-food-button") && (document.querySelector(".add-food-button").style.display = "none");
};

// Check if selected place has food items and show
// else remove food input
var getFood = (slug, name) => {
    var url = `/api/place/food/${slug}`;
    return doGet(url).then(foods => foods);
};

var searchPlaces = (query) => {
    var url = `/api/place/search/${query}`;
    return doGet(url).then(places => places);
};

function selectInput(e) {
    e.target.select();
}

function foodComplete(element, list) {
    let listCopy = [...list]
    ac = autoComplete({
        input: element,
        fetch: function (text, update) {
            listCopy = list.filter(fd => fd.name.toLowerCase().includes(text.toLowerCase()))
            if (document.querySelector(".food-id").value)
                document.querySelector(".food-id").value = "";

if(listCopy.length) {
                update(listCopy);
            }else{
                update(noResult(text))
            }
                // this.input.classList.add('flat-input')
            this.input.addEventListener('blur', removeFlatInput)
            this.input.addEventListener('blur', e => {
                updateCommentPlaceholder(e.target.value, placeName)
            })
        },
        onSelect: function (item) {
            document.querySelector(".food-id").value = item.key;
            element.value = item.name;
            this.input.classList.remove('flat-input')
            updateCommentPlaceholder(item.name, placeName)
            document.querySelector(".close").style.display = "block";
        },
        showOnFocus: true,
    });
}

function updateCommentPlaceholder(item_name, place_name) {
    let txt = item_name ? `How was the ${item_name} at ${place_name}?` : `How was ${place_name}?`
    commentBox && commentBox.setAttribute(
        "placeholder",
        txt
    );
}

const flashContainer = document.querySelector('.flash-message');

// pageForm.addEventListener('submit', async function(e){
//     e.preventDefault();
//     const form = e.target;
//     const button = form.querySelector('.submit-review');
//     const hold = button.innerHTML;
//     button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
//     let $d = {...serializeForm(e)};
//     // localStorage.setItem('review', JSON.stringify($d));
//     // authenticate(button)
//     // .then(response => {
//     //   let review = localStorage.getItem('review') && JSON.parse(localStorage.getItem('review'));
//     //   postit(review, '/api/reviews')
//     //   .then(response => {
//     //     console.log({response})
//     //     postReview(response.payload, form);
//     //     button.innerHTML = hold;
//     //   })
//     // }).catch(res => {
//     //   load.style.display = "none";
//     //   button.innerHTML = hold;
//     // })
// })

document.querySelector("#food").addEventListener("focus", selectInput);

function enableForm() {
    commentBox.removeAttribute("disabled");
    document.querySelector(".submit-review").removeAttribute("disabled");
    document.querySelector('.submit-review-cover').style.display = 'none';
    commentBox.focus();
    const foodSelectInput = foodSelectContainer.querySelector(".food-select");
    if (!foodSelectInput.value)
        commentBox.setAttribute("placeholder", `How was ${placeName || ""}?`);
}

document.querySelectorAll(".rating-stars input").forEach((radio) => {
    radio.addEventListener("change", function (e) {
        enableForm();
    });
});

document.querySelector('.submit-review-cover').addEventListener('click', function(e){
    const place_input = document.querySelector('.place-search')
    if (place_input.value === '') {
        alert('Enter place name')
    } else {
        alert('Select Rating')
    }
    
});

document.querySelector('.submit-review').addEventListener('click', function(e){
    const btn = e.target;
    document.querySelector(".submit-review").setAttribute("disabled", "disabled");
    btn.innerHTML = 'Submitting';
    btn.closest('form').submit()
});

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