var availableFeatures = document.querySelectorAll("#available-features li");
var displayFormat = document.querySelector("#display-format");
var featureToDisplay = document.querySelector("#feature-to-display");
var displayToFeature = document.querySelector("#display-to-feature");
var displayToFormat = document.querySelectorAll("#display-format li");
var availableToDisplay = document.querySelector("#available-features");
var displayincreaseBtn = document.getElementById("display-increase-btn");
var displayDecreaseBtn = document.getElementById("display-decrease-btn");

// features lists
var stocksFeatures = document.querySelectorAll("#stocks-features li");
var cryptoFeatures = document.querySelectorAll("#crypto-features li");
var forexFeatures = document.querySelectorAll("#forex-features li");
var currentWeatherFeatures = document.querySelectorAll(
  "#current-weather-features li"
);
var dailyForecastFeatures = document.querySelectorAll(
  "#daily-forecast-features li"
);
var newsFeatures = document.querySelectorAll("#news-features li");
var upcomingGamesFeatures = document.querySelectorAll(
  "#upcoming-games-features li"
);
var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
var imagesFeatures = document.querySelectorAll("#images-features li");
var gifsFeatures = document.querySelectorAll("#gifs-features li");
var messagesFeatures = document.querySelectorAll("#messages-features li");

var allFeaturesList = [
  stocksFeatures,
  cryptoFeatures,
  forexFeatures,
  currentWeatherFeatures,
  dailyForecastFeatures,
  newsFeatures,
  upcomingGamesFeatures,
  pastGamesFeatures,
  liveGamesFeatures,
  teamStatsFeatures,
  imagesFeatures,
  gifsFeatures,
  messagesFeatures,
];

// features remove buttons
var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
var forexRemoveBtn = document.getElementById("forex-remove-btn");
var currentWeatherRemoveBtn = document.getElementById(
  "current-weather-remove-btn"
);
var dailyForecastRemoveBtn = document.getElementById(
  "daily-forecast-remove-btn"
);
var newsRemoveBtn = document.getElementById("news-remove-btn");
var upcomingGamesRemoveBtn = document.getElementById(
  "upcoming-games-remove-btn"
);
var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
var imagesRemoveBtn = document.getElementById("images-remove-btn");
var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
var messagesRemoveBtn = document.getElementById("messages-remove-btn");

var allFeaturesRemoveBtns = [
  stocksRemoveBtn,
  cryptoRemoveBtn,
  forexRemoveBtn,
  currentWeatherRemoveBtn,
  dailyForecastRemoveBtn,
  newsRemoveBtn,
  upcomingGamesRemoveBtn,
  pastGamesRemoveBtn,
  liveGamesRemoveBtn,
  teamStatsRemoveBtn,
  imagesRemoveBtn,
  gifsRemoveBtn,
  messagesRemoveBtn,
];
// features increase buttons
var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
var forexincreaseBtn = document.getElementById("forex-increase-btn");
var currentWeatherincreaseBtn = document.getElementById(
  "current-weather-increase-btn"
);
var dailyForecastincreaseBtn = document.getElementById(
  "daily-forecast-increase-btn"
);
var newsincreaseBtn = document.getElementById("news-increase-btn");
var upcomingGamesincreaseBtn = document.getElementById(
  "upcoming-games-increase-btn"
);
var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
var imagesincreaseBtn = document.getElementById("images-increase-btn");
var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
var messagesincreaseBtn = document.getElementById("messages-increase-btn");

var allFeaturesIncreaseBtns = [
  stocksincreaseBtn,
  cryptoincreaseBtn,
  forexincreaseBtn,
  currentWeatherincreaseBtn,
  dailyForecastincreaseBtn,
  newsincreaseBtn,
  upcomingGamesincreaseBtn,
  pastGamesincreaseBtn,
  liveGamesincreaseBtn,
  teamStatsincreaseBtn,
  imagesincreaseBtn,
  gifsincreaseBtn,
  messagesincreaseBtn,
];

// features decrease buttons
var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
var currentWeatherDecreaseBtn = document.getElementById(
  "current-weather-decrease-btn"
);
var dailyForecastDecreaseBtn = document.getElementById(
  "daily-forecast-decrease-btn"
);
var newsDecreaseBtn = document.getElementById("news-decrease-btn");
var upcomingGamesDecreaseBtn = document.getElementById(
  "upcoming-games-decrease-btn"
);
var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");

var allFeaturesDecreaseBtns = [
  stocksDecreaseBtn,
  cryptoDecreaseBtn,
  forexDecreaseBtn,
  currentWeatherDecreaseBtn,
  dailyForecastDecreaseBtn,
  newsDecreaseBtn,
  upcomingGamesDecreaseBtn,
  pastGamesDecreaseBtn,
  liveGamesDecreaseBtn,
  teamStatsDecreaseBtn,
  imagesDecreaseBtn,
  gifsDecreaseBtn,
  messagesDecreaseBtn,
];

const changeVarValue = () => {
  stocksFeatures = document.querySelectorAll("#stocks-features li");
  cryptoFeatures = document.querySelectorAll("#crypto-features li");
  forexFeatures = document.querySelectorAll("#forex-features li");
  currentWeatherFeatures = document.querySelectorAll(
    "#current-weather-features li"
  );
  dailyForecastFeatures = document.querySelectorAll(
    "#daily-forecast-features li"
  );
  newsFeatures = document.querySelectorAll("#news-features li");
  upcomingGamesFeatures = document.querySelectorAll(
    "#upcoming-games-features li"
  );
  pastGamesFeatures = document.querySelectorAll("#past-games-features li");
  liveGamesFeatures = document.querySelectorAll("#live-games-features li");
  teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
  imagesFeatures = document.querySelectorAll("#images-features li");
  gifsFeatures = document.querySelectorAll("#gifs-features li");
  messagesFeatures = document.querySelectorAll("#messages-features li");

  allFeaturesList = [
    stocksFeatures,
    cryptoFeatures,
    forexFeatures,
    currentWeatherFeatures,
    dailyForecastFeatures,
    newsFeatures,
    upcomingGamesFeatures,
    pastGamesFeatures,
    liveGamesFeatures,
    teamStatsFeatures,
    imagesFeatures,
    gifsFeatures,
    messagesFeatures,
  ];
};

const addEventOnList = () => {
  // for available feature
  for (let i = 0; i < availableFeatures.length; i++) {
    const availableFeature = availableFeatures[i];
    availableFeature.addEventListener("click", () => {
      for (let i = 0; i < availableFeatures.length; i++) {
        availableFeatures[i].setAttribute("class", "");
      }
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.setAttribute("class", "");
      } else {
        availableFeature.setAttribute("class", "active");
      }
    });
  }
  // for display format
  for (let i = 0; i < displayToFormat.length; i++) {
    const display_format = displayToFormat[i];
    display_format.addEventListener("click", () => {
      for (let i = 0; i < displayToFormat.length; i++) {
        displayToFormat[i].setAttribute("class", "");
      }
      if (display_format.getAttribute("class") == "active") {
        display_format.setAttribute("class", "");
      } else {
        display_format.setAttribute("class", "active");
      }
    });
  }
};

const addEventonBtns = () => {
  featureToDisplay.addEventListener("click", () => {
    for (let i = 0; i < availableFeatures.length; i++) {
      const availableFeature = availableFeatures[i];
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.remove();
        availableFeature.setAttribute("class", "");
        displayFormat.appendChild(availableFeature);
        availableFeatures = document.querySelectorAll("#available-features li");
        displayToFormat = document.querySelectorAll("#display-format li");
        addEventOnList();
      }
    }
  });

  displayToFeature.addEventListener("click", () => {
    for (let i = 0; i < displayToFormat.length; i++) {
      const availableFormat = displayToFormat[i];
      if (availableFormat.getAttribute("class") == "active") {
        availableFormat.remove();
        availableFormat.setAttribute("class", "");
        availableToDisplay.appendChild(availableFormat);
        availableFeatures = document.querySelectorAll("#available-features li");
        displayToFormat = document.querySelectorAll("#display-format li");
        addEventOnList();
      }
    }
  });
};

addEventOnList();
addEventonBtns();

const addEventOnFeaturesList = () => {
  allFeaturesList.map((value) => {
    for (let i = 0; i < value.length; i++) {
      const availableFeature = value[i];
      availableFeature.addEventListener("click", () => {
        for (let i = 0; i < value.length; i++) {
          value[i].setAttribute("class", "");
        }
        if (availableFeature.getAttribute("class") == "active") {
          availableFeature.setAttribute("class", "");
        } else {
          availableFeature.setAttribute("class", "active");
        }
      });
    }
  });
};
addEventOnFeaturesList();

// display increase function
displayincreaseBtn.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat.length; i++) {
    var displayItem = displayToFormat[i];

    if (displayItem.getAttribute("class") == "active") {
      var prevElement = displayItem.previousElementSibling;
      var currentText = displayItem.innerText;

      displayItem.innerText = prevElement.innerText;
      prevElement.innerText = currentText;
      prevElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
    }
  }
});

// display decrease function
displayDecreaseBtn.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat.length; i++) {
    var displayItem = displayToFormat[i];

    if (displayItem.getAttribute("class") == "active") {
      var nextElement = displayItem.nextElementSibling;
      var currentText = displayItem.innerText;

      displayItem.innerText = nextElement.innerText;
      nextElement.innerText = currentText;
      nextElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
      break;
    }
  }
});

// feature remove function
allFeaturesRemoveBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];
      if (item.getAttribute("class") == "active") {
        item.remove();
      }
    }
  });
});

// feature increase function
allFeaturesIncreaseBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];

      if (item.getAttribute("class") == "active") {
        var prevElement = item.previousElementSibling;
        var currentText = item.innerText;
        item.innerText = prevElement.innerText;
        prevElement.innerText = currentText;
        prevElement.setAttribute("class", "active");
        item.setAttribute("class", "");
      }
    }
  });
});

// feature decrease function
allFeaturesDecreaseBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];

      if (item.getAttribute("class") == "active") {
        var nextElement = item.nextElementSibling;
        var currentText = item.innerText;

        item.innerText = nextElement.innerText;
        nextElement.innerText = currentText;
        nextElement.setAttribute("class", "active");
        item.setAttribute("class", "");
        break;
      }
    }
  });
});

// all features
var stocks = document.getElementById("stocks-features");
var crypto1 = document.getElementById("crypto-features");
var forex = document.getElementById("forex-features");
var currentWeather = document.getElementById("current-weather-features");
var dailyForecast = document.getElementById("daily-forecast-features");
var news = document.getElementById("news-features");
var upcomingGames = document.getElementById("upcoming-games-features");
var pastGames = document.getElementById("past-games-features");
var liveGames = document.getElementById("live-games-features");
var teamStats = document.getElementById("team-stats-features");
var images = document.getElementById("images-features");
var gifs = document.getElementById("gifs-features");
var messages = document.getElementById("messages-features");

var allFeatures = [
  stocks,
  crypto1,
  forex,
  currentWeather,
  dailyForecast,
  news,
  upcomingGames,
  pastGames,
  liveGames,
  teamStats,
  images,
  gifs,
  messages,
];

// features select box
var newsSelect = document.getElementById("inputTransition63");
var upcomingGamesSelect = document.getElementById("inputTransition73");
var pastGamesSelect = document.getElementById("inputTransition83");
var liveGamesSelect = document.getElementById("inputTransition93");
var teamStatsSelect = document.getElementById("inputTransition103");
var allFeaturesSelectBox = [
  null,
  null,
  null,
  null,
  null,
  newsSelect,
  upcomingGamesSelect,
  pastGamesSelect,
  liveGamesSelect,
  teamStatsSelect,
  null,
  null,
  null,
];

// features select add buttons
var newsAddBtn = document.getElementById("inputTransitionBtn63");
var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
var allFeaturesSelectAddBtn = [
  null,
  null,
  null,
  null,
  null,
  newsAddBtn,
  upcomingGamesAddBtn,
  pastGamesAddBtn,
  liveGamesAddBtn,
  teamStatsAddBtn,
  null,
  null,
  null,
];

allFeaturesSelectAddBtn.map((value, index) => {
  if (value != null) {
    value.addEventListener("click", () => {
      var tag = document.createElement("li");
      tag.innerHTML = allFeaturesSelectBox[index].value;
      allFeatures[index].appendChild(tag);
      changeVarValue();
      addEventOnFeaturesList();
    });
  }
});

// features input file
var imagesFile = document.getElementById("inputText11");
var gifsFile = document.getElementById("inputText1112");

var allFeaturesFile = [
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  imagesFile,
  gifsFile,
  null,
];
// features file add button
var imagesFileAddBtn = document.getElementById("inputTextBtn11");
var gifsFileAddBtn = document.getElementById("inputTextBtn1112");

var allFeaturesFileAddBtn = [
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  imagesFileAddBtn,
  gifsFileAddBtn,
  null,
];

allFeaturesFileAddBtn.map((value, index) => {
  if (value !== null) {
    value.addEventListener("click", () => {
      var tag = document.createElement("li");
      tag.innerHTML = allFeaturesFile[index].files[0].name;
      allFeatures[index].appendChild(tag);
      changeVarValue();
      addEventOnFeaturesList();
    });
  }
});

// features input text
var stocksText = document.getElementById("inputText3");
var cryptoText = document.getElementById("inputText4");
var forexText = document.getElementById("inputText5");
var currentWeatherText = document.getElementById("inputText6");
var dailyForecastText = document.getElementById("inputText7");
var messagesText = document.getElementById("inputText13");

var allFeaturesText = [
  stocksText,
  cryptoText,
  forexText,
  currentWeatherText,
  dailyForecastText,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  messagesText,
];

// features text add button
var stocksTextAddBtn = document.getElementById("inputTextBtn3");
var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
var forexTextAddBtn = document.getElementById("inputTextBtn5");
var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
var messagesTextAddBtn = document.getElementById("inputTextBtn13");

var allFeaturesTextAddBtn = [
  stocksTextAddBtn,
  cryptoTextAddBtn,
  forexTextAddBtn,
  currentWeatherTextAddBtn,
  dailyForecastTextAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  messagesTextAddBtn,
];

allFeaturesTextAddBtn.map((value, index) => {
  if (value !== null) {
    value.addEventListener("click", () => {
      var tag = document.createElement("li");
      tag.innerHTML = allFeaturesText[index].value;
      allFeatures[index].appendChild(tag);
      changeVarValue();
      addEventOnFeaturesList();
    });
  }
});



var startButton = document.getElementById("start-btn");

// start the display

startButton.addEventListener("click", () => {
  var HTML = document.getElementById('display-format').innerHTML;
  console.log('pressed');
  console.log(HTML);
  
  
  fetch("/start", {
    method:"PUT", 
    
    
    body:JSON.stringify(HTML)
  });
});