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)
  });
});

var shutdownButton = document.getElementById("shutdown-btn");

shutdownButton.addEventListener("click", () => {
  fetch("/shutdown", {
    method:"GET", 
  });
});

var stopButton = document.getElementById("stop-btn");
stopButton.addEventListener("click", () => {
  fetch("/stop", {
    method:"GET", 
  });
});


var dispFormatButton = document.getElementById("dispformat-btn");

var displayFormats = document.getElementById("inputDisplayFormat");

// gets selected functions to display
function getSelected(selector) {
  var opt;
  for ( var i = 0, len = selector.options.length; i < len; i++ ) {
      opt = selector.options[i];
      
      if ( opt.selected === true ) {
          break;
      }
  }
  
  return opt.innerHTML;
}

function getListItems(list_el) {
  let symbols = list_el.getElementsByTagName("li");
  
  let items = []
  for (var i = 0; i < symbols.length; ++i) {
    items.push(symbols[i].innerText);
  }
  return items;
}

// toggle professional
dispFormatButton.addEventListener("click", () => {

  opt = getSelected(displayFormats);
  fetch("/display_format", {
    method:"PUT", 
    body:JSON.stringify(opt)
  });
});


// saves the feature specific settings 
function saveSettings() {
  let featureSelector = document.getElementById("drop");
  feature = getSelected(featureSelector);
  
  let features = ["Stocks", "Crypto", "Forex", "Current Weather", "Daily Forecast", "News", "Sports (Upcoming Games)", "Sports (Past Games)", "Sports (Live Games)", "Sports (Team Stats)", "Custom Images", "Custom GIFs", "Custom Messages"];
  let pageNum = features.indexOf(feature) + 1;
  let pageSelector = "Page" + pageNum.toString();
  
  let page = document.getElementById(pageSelector);
  
  
  // these common to all settings
  let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
  let animation = getSelected(page.querySelectorAll(".animation-select")[0]);
  
  var settings = {'feature': feature, 'speed':speed, 'animation':animation}; // general settings
 
  var s;
  //function specific settings
  switch(pageNum){
    case 1: case 2: case 3:
      s = getTradingSettings(page);
      break;
    case 4: case 5:
      s = getWeatherSettings(page);
      break;
    case 6:
      s = getNewsSettings(page);
      break;
    case 7: case 8: case 9: case 10:
      s = getSportsSettings(page);
      break;
    case 11: case 12:
      s = getImageSettings(page);
      break;
    case 13:
      s = getMessageSettings(page);
      break;
    
  }
  
  settings = {...settings, ...s}; // merge both sets of settings
  
  console.log(settings);
  
  
  fetch("/feature_settings", {
    method:"PUT", 
    body:JSON.stringify(settings)
  });
}

let saveSettingsButtons = document.querySelectorAll(".save-btn-div").forEach(button => 
  button.addEventListener("click", saveSettings)
)

// gets the stock, crypto or forex specific settings 
function getTradingSettings(page) {
  
  // get all the tick boxes
  let percent = page.querySelectorAll(".percent-select")[0].checked;
  let point = page.querySelectorAll(".point-select")[0].checked;
  let no_logos = page.querySelectorAll(".logo-select")[0].checked;
  let chart = page.querySelectorAll(".chart-select")[0].checked;
  let title = page.querySelectorAll(".title-select")[0].checked;
  
  let symbols_el = page.querySelectorAll(".symbol-list")[0];
  let symbols = getListItems(symbols_el);
  
  let settings = {'percent': percent, 'point':point, 'logos':no_logos, 'chart':chart, 'title': title, 'symbols': symbols}
  
  return settings;
}

// gets the current wether and forecast settings 
function getWeatherSettings(page) {
  let temp = getSelected(page.querySelectorAll(".temp-select")[0]);
  let speed = getSelected(page.querySelectorAll(".wind-speed-select")[0]);
  let colour = getSelected(page.querySelectorAll(".colour-select")[0]);
  let city_colour = getSelected(page.querySelectorAll(".city-colour-select")[0]);
  let title = page.querySelectorAll(".title-select")[0].checked;
  
  settings = {'temp':temp, 'wind_speed': speed, 'colour':colour, 'city_colour':city_colour, 'title': title}
  
  
  //only for daily weather
  try {
    current_weather = page.querySelectorAll(".current-weather-select")[0].checked;
    console.log(current_weather);
    settings['current_weather'] = current_weather;
  } catch {

  }

  
  let locations_el = page.querySelectorAll(".location-list")[0];
  let locations = getListItems(locations_el);
  settings['locations'] = locations;
  
  return settings;
}


function getNewsSettings(page){ 
  
  let country = getSelected(page.querySelectorAll(".country-select")[0]);
  let category = getSelected(page.querySelectorAll(".category-select")[0]);
  let title = page.querySelectorAll(".title-select")[0].checked;
  let use_sources = page.querySelectorAll(".sources-select")[0].checked;
  
  let sources_el = page.querySelectorAll(".sources-list")[0];
  let sources = getListItems(sources_el);
  settings = {'country':country, 'category': category, 'title':title, 'use_sources':use_sources, 'sources': sources};
  return settings;
}


function getSportsSettings(page){ 
  let title = page.querySelectorAll(".title-select")[0].checked;
  let leagues_el = page.querySelectorAll(".league-list")[0];
  leagues = getListItems(leagues_el);
  
  settings = {'title':title, 'leagues':leagues};
  return settings;
}

//images and GIFs
function getImageSettings(page){
  let pause = page.querySelectorAll(".pause-select")[0].value;
  let title = page.querySelectorAll(".title-select")[0].checked;
  
  
  let images_el = page.querySelectorAll(".image-list")[0];
  images = getListItems(images_el);
  
  settings = {'title':title, 'pause':pause, 'images':images};
  return settings;
}

function getMessageSettings(page) {
  
}