var MediaCleanerConfig = {
    pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
};

const testConnectionSonarr = () => {
    var apiKeyElement = document.getElementById('SonarrAPIKey');
    var addressElement = document.getElementById('SonarrAddress');
    var validationElement = document.getElementById('SonarrConnectionValidation');

    validateConnection(apiKeyElement, addressElement, validationElement);
}

const testConnectionRadarr = () => {
    var apiKeyElement = document.getElementById('RadarrAPIKey');
    var addressElement = document.getElementById('RadarrAddress');
    var validationElement = document.getElementById('RadarrConnectionValidation');

    validateConnection(apiKeyElement, addressElement, validationElement);
}

const validateConnection = (apiKeyElement, addressElement, validationElement) => {
    // Refactor this to a method called show element?
    validationElement.removeAttribute('hidden');
    validationElement.style.opacity = '1';
    console.log("Api Key: ", apiKeyElement.value);
    console.log("Address: ", addressElement.value);

    var success = false;

    if(success){
        validationElement.style.color = 'Green';
        validationElement.innerText = "Success!"
    }
    else {
        validationElement.style.color = 'Red';
        validationElement.innerText = "Failed!"
    }

    setTimeout(() => startFadeOut(validationElement, 50), 1000);
}

const startFadeOut = (element, interval = 100) => {
  const timer = setInterval(() => {
    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
    if (isNaN(currentOpacity)) currentOpacity = 1;
    if (currentOpacity > 0) {
      currentOpacity = Math.max(0, currentOpacity - 0.05);
      element.style.opacity = currentOpacity.toString();
    } else {
      clearInterval(timer);
      element.setAttribute('hidden', '');
    }
  }, interval);
};

document.querySelector('#RadarrTestConnectionButton')
    .addEventListener('click', testConnectionRadarr);

document.querySelector('#SonarrTestConnectionButton')
    .addEventListener('click', testConnectionSonarr);

document.querySelector('#MediaCleanerConfigPage')
    .addEventListener('pageshow', function() {
        Dashboard.showLoadingMsg();
        ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
            document.querySelector('#RadarrAPIKey').value = config.RadarrAPIKey;
            document.querySelector('#RadarrAddress').value = config.RadarrAddress;
            document.querySelector('#SonarrAPIKey').value = config.SonarrAPIKey;
            document.querySelector('#SonarrAddress').value = config.SonarrAddress;
            document.querySelector('#StaleMediaCutoff').value = config.StaleMediaCutoff;
            document.querySelector('#DebugMode').checked = config.DebugMode;
            Dashboard.hideLoadingMsg();
        });
    });

document.querySelector('#MediaCleanerConfigForm')
    .addEventListener('submit', function(e) {
    Dashboard.showLoadingMsg();
    ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
        config.RadarrAPIKey = document.querySelector('#RadarrAPIKey').value;
        config.RadarrAddress = document.querySelector('#RadarrAddress').value;
        config.SonarrAPIKey = document.querySelector('#SonarrAPIKey').value;
        config.SonarrAddress = document.querySelector('#SonarrAddress').value;
        config.StaleMediaCutoff = document.querySelector('#StaleMediaCutoff').value;
        config.DebugMode = document.querySelector('#DebugMode').checked;
        ApiClient.updatePluginConfiguration(MediaCleanerConfig.pluginUniqueId, config).then(function (result) {
            Dashboard.processPluginConfigurationUpdateResult(result);
        });
    });

    e.preventDefault();
    return false;
});