/*fetch basic
Исследуйте сайт swapi.dev, рассмотрите JSON-ы, которые предоставляются этим сервисом (например: https://swapi.dev/api/people/1/, https://swapi.dev/api/people/2/, https://swapi.dev/api/starships/12/
С помощью следующего кода считать и вывести информацию о Люке Скайвокере:
fetch('https://swapi.dev/api/people/1/')
  .then(res => res.json())
  .then(luke => console.log(luke))
Напишите функцию для отображения любого JSON в форме таблицы. Функция должна принимать два параметра:
DOM - элемент, в котором строится таблица
JSON, который нужно отобразить.*/
{
  function jsonToTable(parent = document.body, jsonObj){
      const jsonTable = document.createElement('table') //Создаём и добавляем в родительский єлемент будущую таблицу
      parent.append(jsonTable)

      for (const key in jsonObj){
          const tr = document.createElement('tr') //одно свойтсво - одна строка
          jsonTable.append(tr)
          const tdProperty = document.createElement('td') //столбик со свойствами обьекта
          tr.append(tdProperty)
          tdProperty.innerText = key
          const tdValue = document.createElement('td') // столбик со значениями свойств обьекта JSON
          tr.append(tdValue)
          tdValue.innerText = jsonObj[key]
      }
  }

  fetch('https://swapi.dev/api/people/1/')
.then(res => res.json())
.then(jsonObj => jsonToTable(document.body, jsonObj))
}

/* fetch improved
Расширить функцию отображения:
Если одно из полей строка или массив.
Если строки или строка содержат в себе https://swapi.dev/api/
То выводить вместо текста строки кнопку, при нажатии на которую:
делается fetch данных по этой ссылке
функция отображения запускает сама себя(рекурсивно) для отображения новых данных в том же элементе.*/


{
  function buttonVisionText()

  function jsonToTable(parent = document.body, jsonObj){
      const jsonTable = document.createElement('table') //Создаём и добавляем в родительский єлемент будущую таблицу
      parent.append(jsonTable)

      for (const key in jsonObj){
          const tr = document.createElement('tr') //одно свойтсво - одна строка
          jsonTable.append(tr)
          const tdProperty = document.createElement('td') //столбик со свойствами обьекта
          tr.append(tdProperty)
          tdProperty.innerText = key
          const tdValue = document.createElement('td') // столбик со значениями свойств обьекта JSON
          tr.append(tdValue)
          let regexp = /^\s*https?:\/\/./i; //тут проверяем является ли значение ссылкой
          if ( regexp.test(jsonObj[key]) ) { 
            const button = document.createElement('button')
            tdValue.append(button)
            button.innerText = 'Показать'
            button.onclick = () => { fetch(jsonObj[key])
            .then(res => res.text())
            .then(txt => {
              tdValue.innerText = txt
              button.innerText = 'скрыть'
            })}
          }else{
          tdValue.innerText = jsonObj[key] //если не является запихиваем занчение в innertext 
          }
      }
  }

  fetch('https://swapi.dev/api/people/1/')
.then(res => res.json())
.then(jsonObj => jsonToTable(document.body, jsonObj))
}

const value = 'nhfnfnfn'
const td = document.createElement('td')


const button = document.createElement('button')
button.innerText = 'Показать'
function buttonVisionText(element, text) {

}

function buttonHidetext()