<file_sep>function populateUFs() {
    const ufSelect = document.querySelector("select[name=uf]")
       
    fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados")
    .then((res)=>{return res.json()})
    .then( states => {
        // ufSelect.innerHTML = ufSelect.innerHTML + `<option value="1">Valor</option>`
        // ufSelect.innerHTML += `<option value="1">Valor</option>`
        for(const state of states) {
            ufSelect.innerHTML += `<option value="${state.id}">${state.nome}</option>`
        }

    })
}

populateUFs()

function getCities(event) {
    const citySelect = document.querySelector("select[name=city]")

    const stateInput = document.querySelector("[name=state]")

    // console.log(event.target.value)

    const ufValue = event.target.value

    const indexOfSelectedState = event.target.selectedIndex

    stateInput.value = event.target.options[indexOfSelectedState].text

    const url = `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${ufValue}/municipios`

    

    citySelect.innerHTML="<option>Selecione a cidade</option>" // ***o melhor a se fazer é limpar o campo logo antes da chamada do fecth

    citySelect.disabled = true //bloqueia novamente  a cidade enquanto o estado não é selecionado

    fetch(url)
    .then((res)=>{return res.json()})
    .then( cities => {
        // citySelect.innerHTML = "" 
        
        //limpar o campo de cidades antes de preencher novamente,
        //pois com a lógica atual, as cidades de todos os estados previamente selecionados
        //estão sendo carregadas

        for(const city of cities) {
            // citySelect.innerHTML += `<option value="${city.id}">${city.nome}</option>`
            citySelect.innerHTML += `<option value="${city.nome}">${city.nome}</option>` //Passa para o formulário
            //não a id da cidade, mas sim a cidade
        }

        citySelect.disabled = false
    }) 

}

document.querySelector("select[name=uf").addEventListener(
    // "change", () => {console.log("ALOO")
    "change",getCities)

// Dinamização dos items de coleta

// Selecionando TODOS as tags "li" dos itens
const itemsToCollect = document.querySelectorAll(".items-grid li")   

for(const item of itemsToCollect) {
    item.addEventListener("click", handleSelectedItem)
}


let selectedItems = [] // Vai armazenar quais itens são selecionados

const collectedItems = document.querySelector("input[name=items]") // Acessando o Input Hidden dos itens


// Estabeleci que cada item possui um event listener que, ao ser clicado,
// executará a função handleSelectedItem

function handleSelectedItem(event) {
    // console.log(event.target)
    // console.log(event.target.dataset.id)
    // const itemId = event.target.dataset.id
    const itemLi = event.target

    const itemId = itemLi.dataset.id

    console.log(itemId)

    // adicionar ou remover classe no html com js

    // if(itemLi.classList.contains('selected') == true) {
    //     itemLi.classList.remove('selected')
    // } else {
    //     itemLi.classList.add('selected')  
    // }

    itemLi.classList.toggle("selected")
    //toggle() adicione ou remove se o elemento não existe ou já existe, respectivament

    //Passando os itens selecionados para o BackEnd:

    // Verificar se existem itens selecionados, se sim, armazená-los
    const alreadySelected = selectedItems.findIndex(item => item == itemId)
    // A função findIndex itera sobre o elemento acessado verificando se a função passada para
    // ela é verdadeira ou falsa. Se for verdade, retorna a posição do elemento. Se não, -1

    // Se já estiver selecionado:
    if(alreadySelected >= 0) {
        // Remover da seleção
        const filteredItems = selectedItems.filter( item => {
        // A função filter itera sobre o elemebto acessado avaliando a função passada. Os elementos
        // que forem avaliados como verdadeiros serão mantidos, os que não, serão removidos.
            const itemIsDifferent = item != itemId
            return itemIsDifferent
        })
        selectedItems = filteredItems
    } else {
        // Adiciona à seleção
        selectedItems.push(itemId)
    }

    // Depois, basta atualizar o hidden input com os itens
    collectedItems.value = selectedItems

}


// Inclusive todos os filhos dos "li" receberam um event listener, assim, clicando-se na imag em
// ou no texto obeteremos as tags respectivas  
// Posso evitar esse click nos filhos de um elemento no próprio css<file_sep>// importar a dependência do sqlite3
const sqlite3 = require("sqlite3").verbose() //configurei com o método verbose() o sqlite
// para que apareça as msgs do banco no terminal 

const db = new sqlite3.Database("./src/database/database.db") //Outra forma de criar um objeto,
// new inicia um outro objeto desde que o que se está sendo retornar seja um construtor/classe
 // cria o bando de dados no caminho designado

 // Exportando o arquivo do banco de dados para a possibilidade de uso da aplicação:
module.exports = db
// o module.exports consegue disponibiizar a variável db para uso de arquivos externos

 // utilizando o objeto banco de dados para as operações:

//  db.serialize(() => {
//      // com comandos SQL eu vou:

//         // crase me permite fazer quebra de linha dentro do argumento do método
//      // 1 Criar uma tabela
//         db.run(`
//             CREATE TABLE IF NOT EXISTS places (
//                 id INTEGER PRIMARY KEY AUTOINCREMENT,
//                 image TEXT,
//                 name TEXT,
//                 address TEXT,
//                 address2 TEXT,
//                 state TEXT,
//                 city TEXT,
//                 items TEXT
//             );
     
//      `) //template-nitrous //os places são os campos da tabela

//      // 2 Inserir dados na tabela
//         // db.run(`
//         //         INSERT INTO places (
//         //             image,
//         //             name,
//         //             address,
//         //             address2,
//         //             state,
//         //             city,
//         //             items
//         //         ) VALUES (?,?,?,?,?,?,?);
//         // `)

//         const query = 
//             `INSERT INTO places (
//                 image,
//                 name,
//                 address,
//                 address2,
//                 state,
//                 city,
//                 items
//             ) VALUES (?,?,?,?,?,?,?);
//         `
//         const values = [
//             // "https://images.unsplash.com/photo-1528323273322-d81458248d40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60",
//             // "Colectoria",
//             // "<NAME>, <NAME>",
//             // "N° 260",
//             // "Santa Catarina",
//             // "Rio do Sul",
//             // "Resíduos Eletrônicos, Lâmpadas"

//             "https://images.unsplash.com/photo-1567393528677-d6adae7d4a0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60",
//             "Papersider",
//             "<NAME>, <NAME>",
//             "N° 260",
//             "Santa Catarina",
//             "Rio do Sul",
//             "Resíduos Eletrônicos, Lâmpadas"
//         ]

//         function afterInsertData(err) {
//             if(err) {
//                 return console.log(err)
//             }
//              console.log("Cadastrado com sucesso")
//              console.log(this)
//         } //recebe um possível erro no cadastro
         
//         db.run(query, values, afterInsertData) //como 3° argumento é passada uma função,
//         //callback que irá rodar assim que a run terminar de rodar
        

//     // 3 Consultar os dados da tabela
//     // db.all(`SELECT name FROM places`, function(err, rows) {
//     //     if (err) {
//     //         return console.log(err)
//     //     }
//     //     console.log("Aqui estão seus registros: ")
//     //     console.log(rows)
//     //     } )

//     // 4 Deletar um dado da tabela
    // // db.run(`DELETE FROM places WHERE id = ?`, [3], function(err) {
    // //     if (err) {
    // //         return console.log(err)
    // //     }
    // //     console.log("Registro deletado com sucesso!")
    // //     })

// })<file_sep>const express = require("express") // Forma de usar o Express, estou fazendo a requisição do mesmo,
// e à armazaenando numa variável

const server = express() // A variável express recebeu uma função Express, que está sendo executada
// e atribuída ao server

// Acessando o Bando de Dados
const db = require("./database/db") // Nesse caso não precisa colocar db.js

// Configurar pasta public
server.use(express.static("public"))

// Habilitar o uso do req.body no servidor
server.use(express.urlencoded({ extended: true }))

// Utilizando template-engine Nunjucks
const nunjucks = require("nunjucks")
nunjucks.configure("src/views", {
    express: server,
    noCache: true
}) 

// Para configurar o nunjucks devo passar 2 argumentos: a pasta onde se encontram os html, um objeto 
// (que no caso contém o nome do servidor e a opção de não usar cache, pois pode fazer a aplicação 
// apresentar bugs no desenvolvimento)

// req: Requisição
// res: Resposta

// Configurar caminhos da minha aplicação página inicial
server.get("/", (req, res) => {

    // res.send("Alo")
    // res.sendFile(__dirname + "/views/index.html") //__dirname é uma variável global já existente 
    // que guarda o nome do diretório atual.

    return res.render("index.html", {
        title: "Seu marketplace de coleta de resíduos"
    } ) 
    // antes de devolver a página em html puro, ela deve ser renderizada pela template-engine. 
    // Posso retirar o caminho anterior, à página, pois já configurei no Nunjucks.

// O segundo argumento passado é um objeto contendo um par "key" e "value", cuja a 
// "key deve corresponder à que está sendo usada no html"

})

server.get("/create-point", (req, res) => {
    // res.sendFile(__dirname + "/views/create-point.html")

    // É essa rota que recebe os dados do formulário, portanto vamos
    // enviar os dados para o banco
    
    // req.query: acesso aos Query Strings da url
    // console.log(req.query)

    return res.render("create-point.html")
})

// o método .post usa  o parâmetro POST na rota para enviar as iformações de uma maneira diferente,
// mais segura. Não deixa os dados aparecerem na url.

// server.post("/create-point") poderia ser a mesma rota de antes, mas com o POST. Mas, para treinar:
server.post("/savepoint", (req,res) => {

    // console.log(req.query) //Eu não consigo mais pegar os dados do formulário pelo req.query com o POST

    // req.body:  é o corpo do formulário
    // console.log(req.body) // por padrão o Express não está habilitado a receber o .body, o corpo da req
    // por isso dá undefined. Basta habilitar em cima

    // inserindo os dados no banco:
        const query = 
            `INSERT INTO places (
                image,
                name,
                address,
                address2,
                state,
                city,
                items
            ) VALUES (?,?,?,?,?,?,?);
        `
        const values = [
            req.body.image,
            req.body.name,
            req.body.address,
            req.body.address2,
            req.body.state,
            req.body.city,
            req.body.items //nesse caso, a vírgula final pode, só não pode no SQL
        ]

        // recebe um possível erro no cadastro:
        function afterInsertData(err) {
            if(err) {
                return console.log(err)
            }
             console.log("Cadastrado com sucesso")
             console.log(this)

            // return res.send("ok") // Agora ele retorna a confirmação de cadastro no banco só depois
            // de terminar a execução da callback.

            return res.render("create-point.html", { saved: true }) // renderizar a create-point
            // para que o modal de confirmação possa aparecer.


        }
         
        db.run(query, values, afterInsertData) //como 3° argumento é passada uma função, callback que irá 
        // rodar assim que a run terminar de rodar.


    // return res.send("ok") //no navegar aparece Cannot GET /savepoint, pois o navegador e o
    // formulário por padrão usam o GET.
})

server.get("/search", (req, res) => {
    // return res.render("search-results.html")

    // Escrevendo a lógica do formulário de pesquisa
    const search = req.query.search // Retorna as Querys da pesquisa

    // Se pesquisa estiver com campo vazio:
    if (search == "") {
        return res.render("search-results.html", { total: 0 })
    }

    // Para procurar e apresentar os dados de forma dinâmica, devemos primeiro ter acesso ao banco de dados

    // Acessando o banco:
    // db.all(`SELECT * FROM places`, function(err, rows) {
    // db.all(`SELECT * FROM places WHERE city = '${search}'`, function(err, rows) {
    // como estamos usando Query Literals, pode-se interpolar uma variável na Query,
    // bastando usar '${variável}'. Deve estar entre aspas simples para que no SQL
    // ela seja interpretada como string.

    // Utilizar o LIKE e o % dentro dos aspas permite a busca por strings que contenham a string comparada 
    // no antes ou depois.

    db.all(`SELECT * FROM places WHERE city LIKE '%${search}%'`, function(err, rows) {
        if (err) {
            console.log(err)
            return res.send("Erro de cadastro") 
            // para que a msg de erro apareça para o usuário também, não só no console.
        }
        console.log("Aqui estão seus registros: ")
        console.log(rows)

        const total = rows.length 
        //Conta a quatidade de colunas da tabela, e consequentemente quantas pontos cadastrados.

        // Monstrando a página html com os dados do banco:

        // return res.render("search-results.html", { places: rows })
        // return res.render("search-results.html", { places: rows, total: total })
        return res.render("search-results.html", { places: rows, total })
        // no JS, quando a key e o value são iguais, possa passar só um.
    })

    // return res.render("search-results.html", {places: rows}) //Aqui está fora do escopo de rows,
    // Deve-se retornar dentro da função que recebe rows.

})

// "ligando" o servidor
server.listen(3000) //listen é uma função que "ouve" a porta especificada quando o arquivo JS for executado

