//get the html elements
const btnSubmit = document.querySelector('#btnSubmit');
const meetingsList = document.querySelector('.meetingsList');
const formName = document.querySelector('#formName');
const formTitle = document.querySelector('#formTitle');
const formLocalization = document.querySelector('#formLocalization');
const formDate = document.querySelector('#formDate');
const formBike = document.querySelector('#formBike');
const formPeople = document.querySelector('#formPeople');
const formDuration = document.querySelector('#formDuration');
const formDistance = document.querySelector('#formDistance');
const formLevel = document.querySelector('#formLevel');
const formDescription = document.querySelector('#formDescription');
const formInfo = document.querySelector('#formInfo');
const box1 = document.querySelector('.section__box1');
const sectionTitle = document.querySelector('.section__title');
const link = document.querySelector('.meetingsList__link');
const card = document.querySelector('.meetingCard');
const box4 = document.querySelector('.section__box4');
let id = 1;
let sumData;
// http class

class HTTPRequests {

  //just empty constructor for now
  constructor() {

  }

  //GET request
  async get(url) {
    const response = await fetch(url);
    const resData = await response.json();
    return resData;
  }

  //POST request
  async post(url, data) {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify(data)
    });
    const resData = await response.json();
    return resData;
  }
}

//UI class

class UI {
  constructor() {
    this.meetingsList = document.querySelector('.meetingsList');
    this.formName = document.querySelector('#formName');
    this.formTitle = document.querySelector('#formTitle');
    this.formLocalization = document.querySelector('#formLocalization');
    this.formDate = document.querySelector('#formDate');
    this.formBike = document.querySelector('#formBike');
    this.formPeople = document.querySelector('#formPeople');
    this.formDuration = document.querySelector('#formDuration');
    this.formDistance = document.querySelector('#formDistance');
    this.formLevel = document.querySelector('#formLevel');
    this.formDescription = document.querySelector('#formDescription');
    this.formInfo = document.querySelector('#formInfo');
    this.btnSubmit = document.querySelector('#btnSubmit');
    this.box4 = document.querySelector('.section__box4');
  }

  //Rendering meeting List
  showMeetings(meetings) {

    //make a empty var for a render one meeting item
    let output = '';

    //a loop through our data to render a html meeting item
    meetings.forEach(meeting => {
      id = meeting.id;
      id++;
      output += `
        <li class="meetingsList__item">
          <a class="meetingsList__link" href="#" data-id="${meeting.id}">
            <span class="meetingsList__text" id="title">${meeting.title}</span>
            <span class="meetingsList__text" id="date">${meeting.date}</span>
            <span class="meetingsList__text" id="name">${meeting.name}</span>
          </a>
        </li>
      `;
    });

    //add the output to html
    this.meetingsList.innerHTML = output;
  }

  //showCard
  showCard(sumData) {
    let output = '';

      output = ` <ul class="meetingCard">
      <li class="meetingCard__item"><span class="meetingCard__title">Organizator: </span><span class="meetingCard__text">${sumData.name}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Nazwa: </span><span class="meetingCard__text">${sumData.title}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Lokalizacja: </span><span class="meetingCard__text">${sumData.localization}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Data: </span><span class="meetingCard__text">${sumData.date}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Rower: </span><span class="meetingCard__text">${sumData.bike}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Liczba osób: </span><span class="meetingCard__text">${sumData.people}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Czas trwania: </span><span class="meetingCard__text">${sumData.duration}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Trasa </span><span class="meetingCard__text">${sumData.distance}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Poziom trudności: </span><span class="meetingCard__text">${sumData.level}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Opis trasy: </span><span class="meetingCard__text">${sumData.description}</span></li>
      <li class="meetingCard__item"><span class="meetingCard__title">Dodatkowe informacje: </span><span class="meetingCard__text">${sumData.info}</span></li>


    </ul>
    <div class="btnGroup btnGroup--active"> <!-- btn--active-->
      <button class="btn btn--yellow" id="update-btn">Zaktualizuj ustawkę</button>
      <button class="btn btn--red" id="delete-btn">Skasuj ustawkę</button>
    </div>`;

  box4.innerHTML = output;
  }

  //show alert if the meeting is added
  showAlert(msg, className) {

    //create div
    const div = document.createElement('div');
    //add class
    div.className = className;
    //add text
    div.appendChild(document.createTextNode(msg));
    //insert to html
    box1.insertBefore(div,sectionTitle);

    // alert disapear after 2s
    setTimeout(() => {
      this.clearAlert();
    },2000);
  }

  // delete alert
  clearAlert() {
    const alert = document.querySelector('.alert');

    if(alert) {
      alert.remove();
    }
  }
  // clear form inputs after submit
  clearForm() {
    this.meetingsList.value = '';
    this.formName.value = '';
    this.formTitle.value = '';
    this.formLocalization.value = '';
    this.formDate.value = '';
    this.formBike.value = '';
    this.formPeople.value = '';
    this.formDuration.value = '';
    this.formDistance.value = '';
    this.formLevel.value = '';
    this.formDescription.value = '';
    this.formInfo.value = '';
    this.btnSubmit.value = '';
  }
}


// App

// make a object of http
url = 'https://jsonbox.io/box_bc8f76851b8b77c9ff0b';
// url = 'http://localhost:3000/data.json';
const http = new HTTPRequests();

// make an object of UI
const ui = new UI();

// function getMeetings
const getMeetings = () => {
  //make a get request
  http.get(url)
    .then(data => ui.showMeetings(data))
    .catch(error => console.log(error));
}

//function sendMeeting
const sendMeeting = (event) => {


  // get the value of inputs

  const name = formName.value;
  const title = formTitle.value;
  const localization = formLocalization.value;
  const date = formDate.value;
  const bike = formBike.value
  const people = formPeople.value;
  const duration = formDuration.value;
  const distance = formDistance.value;
  const level = formLevel.value;
  const description = formDescription.value;
  const info = formInfo.value;

  //make summary data
    sumData = {
    id,
    name,
    title,
    localization,
    date,
    bike,
    people,
    duration,
    distance,
    level,
    description,
    info
  }

  //make a post request
  http.post(url, sumData)
    .then(getMeetings())
    .then(ui.showAlert('Ustawka dodana', 'alert alert--success'))
    .then(ui.clearForm())
    .catch(error => console.log(error));
    event.preventDefault();

}

//function to show meeting card
const toggleCard = (event) => {
  event.preventDefault();

  if(event.target.parentElement.classList.contains('meetingsList__link')) {
    id = event.target.parentElement.dataset.id;

  }

  if(id) {
    http.get(url)
      .then(console.table(sumData.name))
      .then(ui.showCard(sumData))
      .catch(error => console.log(error))

  }
}

// Listener for load all meetings
document.addEventListener('DOMContentLoaded', getMeetings);

//listener for add meeting
btnSubmit.addEventListener('click', sendMeeting);

// listener for toggle a meeting card
meetingsList.addEventListener('click', toggleCard);

//listener for delete meeting