/* global settings, root, fs, settingsPath, ini */

function changeColor(section, setting, tempSection) {
  document.querySelector(section).value = setting;
  const value = document.querySelector(section).value;
  root.style.setProperty(tempSection, value);
}

function setCurrentTheme(adjustTemp = false) {
  changeColor('#MAIN_COLOR_1', settings.THEME.MAIN_COLOR_1, adjustTemp ? '--main-color1-temp' : '--main-color1');
  changeColor('#MAIN_COLOR_2', settings.THEME.MAIN_COLOR_2, adjustTemp ? '--main-color2-temp' : '--main-color2');
  changeColor('#MAIN_COLOR_3', settings.THEME.MAIN_COLOR_3, adjustTemp ? '--main-color3-temp' : '--main-color3');
  changeColor('#MAIN_COLOR_4', settings.THEME.MAIN_COLOR_4, adjustTemp ? '--main-color4-temp' : '--main-color4');
  changeColor('#TOP_BAR', settings.THEME.TOP_BAR, adjustTemp ? '--top-bar-temp' : '--top-bar');
  changeColor('#MID_SECTION', settings.THEME.MID_SECTION, adjustTemp ? '--mid-section-temp' : '--mid-section');
  changeColor('#CHAT_BUBBLE_BG', settings.THEME.CHAT_BUBBLE_BG, adjustTemp ? '--chat-bubble-temp' : '--chat-bubble');
  changeColor('#CHAT_BUBBLE_HEADER', settings.THEME.CHAT_BUBBLE_HEADER, adjustTemp ? '--chat-bubble-header-temp' : '--chat-bubble-header');
  changeColor(
    '#CHAT_BUBBLE_MESSAGE',
    settings.THEME.CHAT_BUBBLE_MESSAGE,
    adjustTemp ? '--chat-bubble-message-temp' : '--chat-bubble-message'
  );
}

setCurrentTheme(true);

function setTheme() {
  if (settings.THEME.USE_CUSTOM_THEME) {
    setCurrentTheme();
  } else {
    root.style.setProperty('--main-color1', '#6e2c8c');
    root.style.setProperty('--main-color2', 'white');
    root.style.setProperty('--main-color3', '#211E1E');
    root.style.setProperty('--main-color4', '#2f2c34');
    root.style.setProperty('--top-bar', '#100B12');
    root.style.setProperty('--mid-section', '#352d3d');
    root.style.setProperty('--chat-bubble', ' #7A6D7F');
    root.style.setProperty('--chat-bubble-header', '#141414');
    root.style.setProperty('--chat-bubble-message', 'white');
  }
}

document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
  const x = document.getElementById('MAIN_COLOR_1').value;
  root.style.setProperty('--main-color1-temp', x);
  console.log(x);
});

document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
  settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#MAIN_COLOR_1', settings.THEME.MAIN_COLOR_1, '--main-color1');
});

document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => {
  const x = document.getElementById('MAIN_COLOR_2').value;
  root.style.setProperty('--main-color2-temp', x);
});

document.body.querySelector('#MAIN_COLOR_2').addEventListener('change', () => {
  settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#MAIN_COLOR_2', settings.THEME.MAIN_COLOR_2, '--main-color2');
});

document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => {
  const x = document.getElementById('MAIN_COLOR_3').value;
  root.style.setProperty('--main-color3-temp', x);
});

document.body.querySelector('#MAIN_COLOR_3').addEventListener('change', () => {
  settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#MAIN_COLOR_3', settings.THEME.MAIN_COLOR_3, '--main-color3');
});

document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => {
  const x = document.getElementById('MAIN_COLOR_4').value;
  root.style.setProperty('--main-color4-temp', x);
});

document.body.querySelector('#MAIN_COLOR_4').addEventListener('change', () => {
  settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#MAIN_COLOR_4', settings.THEME.MAIN_COLOR_4, '--main-color4');
});

document.body.querySelector('#TOP_BAR').addEventListener('input', () => {
  const x = document.getElementById('TOP_BAR').value;
  root.style.setProperty('--top-bar-temp', x);
});

document.body.querySelector('#TOP_BAR').addEventListener('change', () => {
  settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#TOP_BAR', settings.THEME.TOP_BAR, '--top-bar');
});

document.body.querySelector('#MID_SECTION').addEventListener('input', () => {
  const x = document.getElementById('MID_SECTION').value;
  root.style.setProperty('--mid-section-temp', x);
});

document.body.querySelector('#MID_SECTION').addEventListener('change', () => {
  settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#MID_SECTION', settings.THEME.MID_SECTION, '--mid-section');
});

document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => {
  const x = document.getElementById('CHAT_BUBBLE_BG').value;
  root.style.setProperty('--chat-bubble-temp', x);
});

document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('change', () => {
  settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#CHAT_BUBBLE_BG', settings.THEME.CHAT_BUBBLE_BG, '--chat-bubble');
});

document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', () => {
  const x = document.getElementById('CHAT_BUBBLE_HEADER').value;
  root.style.setProperty('--chat-bubble-header-temp', x);
});

document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('change', () => {
  settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#CHAT_BUBBLE_HEADER', settings.THEME.CHAT_BUBBLE_HEADER, '--chat-bubble-header');
});

document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', () => {
  const x = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
  root.style.setProperty('--chat-bubble-message-temp', x);
});

document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('change', () => {
  settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
  fs.writeFileSync(settingsPath, ini.stringify(settings));
  changeColor('#CHAT_BUBBLE_MESSAGE', settings.THEME.CHAT_BUBBLE_MESSAGE, '--chat-bubble-message');
});

module.exports = { setTheme };