Elep

const api_key = 'AIzaSyAJsPhI-fGmDBIUh9yLu_MiUj4hZ2nlWU8';

const searchlist = [
    { name: 'Peppersoup', value: 'peppersoup' },
    { name: 'Goat Meat', value: 'goat meat' },
    { name: 'Catfish Peppersoup', value: 'catfish peppersoup' },
    { name: 'Catfish', value: 'catfish' },
    { name: 'Grilled Fish', value: 'grilled fish' },
    { name: 'Croaker Fish', value: 'croaker fish' },
    { name: 'Abacha', value: 'abacha' },
    { name: 'Shawarma', value: 'shawarma' },
    { name: 'Rice', value: 'rice' },
    { name: 'Jollof Rice', value: 'jollof rice' },
    { name: 'Ofada', value: 'ofada' },
    { name: 'Nkwobi', value: 'nkwobi' },
    { name: 'Spaghetti', value: 'spaghetti' },
    { name: 'Moi Moi', value: 'moi moi' },
    { name: 'Amala', value: 'amala' },
    { name: 'Egusi', value: 'egusi' },
    { name: 'Fried Rice', value: 'fried rice' },
    { name: 'Oha', value: 'oha' },
    { name: 'Ofe Oha', value: 'ofe oha' },
    { name: 'Peppered Chicken', value: 'peppered chicken' },
    { name: 'Chicken', value: 'chicken' },
    { name: 'Chicken Wings', value: 'chicken wings' },
    { name: 'Wings', value: 'wings' },
    { name: 'Edikaikong', value: 'edikaikong' },
    { name: 'Okra', value: 'okra' },
    { name: 'Seafood Okra', value: 'seafood okra' },
    { name: 'Boli', value: 'boli' },
    { name: 'Asun', value: 'asun' },
    { name: 'Suya', value: 'suya' },
    { name: 'Corn', value: 'corn' },
    { name: 'Corn on the Cob', value: 'corn on the cob' }
]

const defaultimages = {
    "peppersoup": "/images/resized/peppersoup_cropped.jpg",
    "goat meat": "/images/resized/peppersoup_cropped.jpg",
    "catfish peppersoup": "/images/resized/catfish-peppersoup_cropped.jpg",
    "catfish": "/images/resized/catfish-peppersoup_cropped.jpg",
    "grilled fish": "/images/resized/grilled-fish_cropped.jpg",
    "croaker fish": "/images/resized/grilled-fish_cropped.jpg",
    "abacha": "/images/resized/abacha_cropped.jpg",
    "shawarma": "/images/resized/shawarma_cropped.jpg",
    "rice": "/images/resized/rice_cropped.jpg",
    "jollof rice": "/images/resized/rice_cropped.jpg",
    "ofada": "/images/resized/ofada_cropped.jpg",
    "nkwobi": "/images/resized/nkwobi_cropped.jpg",
    "spaghetti": "/images/resized/spaghetti_cropped.jpg",
    "moi moi": "/images/resized/moi-moi_cropped.jpg",
    "amala": "/images/resized/amala_cropped.jpg",
    "egusi": "/images/resized/egusi_cropped.jpg",
    "fried rice": "/images/resized/fried-rice_cropped.jpg",
    "oha": "/images/resized/oha_cropped.jpg",
    "ofe oha": "/images/resized/oha_cropped.jpg",
    "peppered chicken": "/images/resized/peppered-chicken_cropped.jpg",
    "chicken": "/images/resized/peppered-chicken_cropped.jpg",
    "edikaikong": "/images/resized/edikaikong_cropped.jpg",
    "okra": "/images/resized/okra_cropped.jpg",
    "seafood okra": "/images/resized/okra_cropped.jpg",
    "boli": "/images/resized/boli_cropped.jpg",
    "asun": "/images/resized/asun2_cropped.jpg",
    "suya": "/images/resized/suya_cropped.jpg",
    "corn": "/images/resized/corn_cropped.jpg",
    "corn on the cob": "/images/resized/corn_cropped.jpg"
}

const load = document.getElementById('loading');

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

const getCoords = (address) => `https://maps.googleapis.com/maps/api/geocode/json?address=${address}+lagos+Nigeria&key=${api_key}`;

const plusDecode = (str) => typeof str === 'string' ? str.split("+").join(" ") : str;
const plusEncode = (str) => typeof str == 'string' ? str.split(" ").join("+") : str;

const serialize = (obj) => {
    var params = new URLSearchParams();
    Object.keys(obj).forEach(key => {
        if (obj[key] !== false) {
            params.append(key, obj[key])
        }
    })
    return params.toString();
}

function likePlace(e) {
	e.preventDefault();
	const lb = e.currentTarget;
	const place_slug = lb.dataset.slug

const url = `/api/places/like/${place_slug}`;
    like(url, lb)
}

function likeExplore(button, id) {
    const url = `/api/explore/like/${id}`;
    like(url, button)
}

const doFetch = (url, data) => {
	const post = Object.assign({
        credentials: 'same-origin',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    }, data);

result = {};
	return fetch(url, post)
		.then(async (response) => {

if (response.headers.get('Content-Type') === 'application/json') {
                result.type = 'json';
                result.payload = await response.json();
			}else {
                result.type = 'text';
                result.payload = await response.text();
            }

return result;
		}
	).catch(error => console.error(error))
}

const doGet = (url) => {
	return fetch(url, {credentials: "same-origin", headers: {'X-Requested-With': 'XMLHttpRequest'}})
		.then(response => {
			if (response.headers.get('Content-Type') === 'application/json') {
				return response.json();
			}
			return response.text();
		}
	).catch(error => console.error(error))
}

const doGetWithHeaders = (url) => {
	return fetch(url, {credentials: "same-origin", headers: {'X-Requested-With': 'XMLHttpRequest'}})
		.then(response => response).catch(error => console.error(error))
}

const fetchApi = (next) => {
    const token = document.querySelector('meta[name="search_token"]').getAttribute('value');
    return new Promise((resolve, reject) => {
        const link = `/api${location.pathname + (next ? "?" + serialize(next) : location.search)}&t=${token}`;
        doGet(link)
            .then(response => resolve(response))
            .catch(error => reject(error))
    })
}

const fetchPlaceApi = () => {
    return new Promise((resolve, reject) => {
        const link = `/api${location.pathname}`;
        doGet(link)
            .then(response => resolve(response))
            .catch(error => reject(error))
    })

}

document.addEventListener('click', function(e){
    if (e.target.matches('.api-get-plain')) {
        e.preventDefault();
        const targ = e.target;
        const getLink = targ.dataset.href;
        const container = targ.closest('.vex-content');
        doGet(getLink)
        .then(response => {
            container.innerHTML = response;
        })
    }

})

const postit = (formData, link, method = 'POST') => {
    const headers = {
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value'),
        'X-Requested-With': 'XMLHttpRequest'
    }

return doFetch(link, {
        credentials: 'same-origin',
        method: method,
        body: JSON.stringify(formData),
        headers
    }).then(res => {
        load && (load.style.display = "none");
        return res;
    })
}

function serializeForm(e){
    e.stopPropagation();
    e.preventDefault();
    const target = e.target;
    var data = new FormData(target);

return Object.fromEntries(data);
}

function capitalize(str){
    return str ? str.split(" ").map(word => {
        if(word.toLowerCase() === 'and' || word.toLowerCase() === 'in' || word.toLowerCase() === 'with') return word.toLowerCase();
        else if (typeof word != "string") return word;
        else return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    }).join(" ") : '';
}

const starTemp = (num) => {
    let stars = '';
    for (var i = 0; i < num; i++) {
        stars += '<i class="fa fa-star"></i>';
    }

return stars;
}

document.addEventListener('submit', async function (e) {

if (e.target.matches('.search-form')) {
        e.preventDefault();
        load && (load.style.display = "flex");
        const errorP = document.querySelector('.unknown-error');
        const form = e.target;

const formData = new FormData(form);

if(formData.get('address').toLowerCase() === 'lekki, nigeria' || formData.get('address').toLowerCase() === 'lekki'){
            formData.set('latitude', 6.4478093);
            formData.set('longitude', 3.4723495);
        }

else if (!formData.get('longitude') && formData.get('address')) {
            fetch(getCoords(formData.get('address')))
                .then(res => res.json())
                .then(response => {
                    const { lng, lat } = response.results && response.results[0].geometry.location
                    formData.set('longitude', lng);
                    formData.set('latitude', lat);
                    window.location.href = `/search?${serialize(Object.fromEntries(formData))}`
                }).catch(error => {
                    load && (load.style.display = "none");

errorP && (errorP.style.display = 'block');
                })

}else if(!formData.get('address')){
            formData.set('longitude', "");
            formData.set('latitude', "");

window.location.href = `/search?${serialize(Object.fromEntries(formData))}`
        }
        const gotos = serialize(Object.fromEntries(formData));
        window.location.href = `/search?${gotos}`;
    }
})