//create map
const map = L.map('mapid').setView([-16.8206659, -49.2560855], 15);

//create and add tileLayer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

//create icon
const icon = L.icon({
    iconUrl: "/images/map-marker.svg",
    iconSize: [58, 68],
    iconAnchor: [29, 68],
})

let marker;

//create and  add marker
map.on('click', function (event) {
    const lat = event.latlng.lat
    const lng = event.latlng.lng

    document.querySelector('[name=lat]').value = lat
    document.querySelector('[name=lng]').value = lng
    //remove icon
    marker && map.removeLayer(marker)

    // add icon Layer
    marker = L.marker([lat, lng], { icon })
        .addTo(map)
})

//photos upload
function addPhotoField() {
    //pegar o container de fotos #images
    const container = document.querySelector('#images')
    //pegar o container para duplicar .new-image
    const fieldsContainer = document.querySelectorAll('.new-upload')
    //realizar o clone da ultima imagem adicionada
    const newFieldContainer = fieldsContainer[fieldsContainer.length - 1].cloneNode(true)
    //verificar se o campo está vazio, se sim não adicionar ao container
    const input = newFieldContainer.children[0]
    if (input.value == "") {
        return
    }
    //limpar o campo antes de adicionar ao contaienr de imagens
    input.value = ""
    //adicionar o clone ao contaienr de #images
    container.appendChild(newFieldContainer)
}

function deleteField(event) {
    const span = event.currentTarget

    const fieldsContainer = document.querySelectorAll('.new-upload')

    if (fieldsContainer.length < 2) {
        //limpar o valor do campo
        span.parentNode.children[0].value = ""
        return
    }

    //deletar o campo
    span.parentNode.remove()

}

//select yes or no
function toggleSelect(event) {
    //retirar a classe .active dos botões
    document.querySelectorAll('.button-select button')
        .forEach((button => {
            button.classList.remove('active')
        }))
    //colocar a class .active nesse botão clicado
    const button = event.currentTarget
    button.classList.add('active')
    //atualizar o meu input hideen com o valor selecionardo
    const input = document.querySelector('[name="open_on-weekends"]')
    input.value = button.dataset.value
}

// function validade(event) {
//     //validar se o lat e o lng estão preenchidos

//     const needsLatAndLang = true;
//     if (needsLatAndLang) {
//         event.preventDefault()
//         alert('Selecione um ponto no map')
//     }
// }

