import './style.css'

const URL = "http://localhost:8000/index.php";

(async () => {
  const voivs = await (await fetch(URL)).json() as string[]
  const tbody = document.getElementById('tds-here') as HTMLTableSectionElement;
  for (let i = 0; i < voivs.length; i += 2) {
    const tr = document.createElement("tr")
    const td = document.createElement("td")
    td.innerText = voivs[i + 1]
    td.onclick = () => showCities(voivs[i + 1], voivs[i]);
    tr.appendChild(td)
    tbody.appendChild(tr)
  }
})()

async function showCities(n: string, id: string) {
  const res = await (await fetch(URL, {
    method: "POST",
    body: id,
  })).json() as string[]
  // console.log(res)
  const nh = document.getElementById("name-here") as HTMLTableRowElement
  const vt = document.getElementById("vtds-here") as HTMLTableSectionElement
  vt.innerHTML = ''
  nh.innerHTML = `<th>Miasta w ${n} (${res.length}, <a href="https://duckduckgo.com/?q=wikipedia+Kategoria%3AMiasta+w+wojew%C3%B3dztwie+${n}" target="_blank">internet</a>)</th>`

  for (const c of res) {
    const tr = document.createElement("tr")
    const td = document.createElement("td")
    td.innerText = c
    tr.appendChild(td)
    vt.appendChild(tr)
  }
}