$(document).ready(function() {

  console.log("Welcome to the weed strain name generator, enjoy!");

  $(".modal_open").click(function() {
    $('.select_option').removeClass('select_option_selected');   
    $('#parent1').val('');
    $('#parent2').val('');
    var saved_parent1 = $('#saved_parent1').val();
    var saved_parent2 = $('#saved_parent2').val();
    var saved_theme = $('#saved_theme').val();
    if (saved_parent1 !== "") { $('#parent1').val(saved_parent1); }
    if (saved_parent2 !== "") { $('#parent2').val(saved_parent2); }
    if (saved_theme !== "") {     $('.select_option[theme="' + saved_theme + '"]').addClass('select_option_selected'); }
    var get_modal = $(this).attr('modal');
    var modal = document.querySelector(".modal_" + get_modal);
    modal.showModal();
    $(".modal").css("transform", "scale(1)");
    $(".modal").css("opacity", "1");
  });

  $(".modal_close").click(function() {
    var get_modal = $(this).attr('modal');
    var modal = document.querySelector(".modal_" + get_modal);
    setTimeout(function() { modal.close(); }, 200); 
    $(".modal").css("transform", "scale(0.8)");
    $(".modal").css("opacity", "0");
  });

  $(document).on('click', '.modal', function(e) {
    if ($(e.target).hasClass('modal')) {
    console.log('Modal background clicked');
    const openDialog = $('dialog[open]');
    if (openDialog.length) {
      const attributeValue = openDialog.attr('modal');
      console.log(attributeValue);
      if (attributeValue != "modal_age") {
        var modal = document.querySelector(".modal_" + attributeValue);
        setTimeout(function() { modal.close(); }, 200); 
        $(".modal").css("transform", "scale(0.8)");
        $(".modal").css("opacity", "0");
      }
    }
    }
  });

  async function refreshName() {
    var saved_parent1;
    saved_parent1 = $("#saved_parent1").val();
    var saved_parent2;
    saved_parent2 = $("#saved_parent2").val();
    var saved_theme;
    saved_theme = $("#saved_theme").val();
    request = $.ajax({
      url: "/services/refresh",
      type: "POST", 
      data: { saved_parent1: saved_parent1, saved_parent2: saved_parent2, saved_theme: saved_theme }
    });
    request.done(function (response, textStatus, jqXHR) {
      $('#name > span').html(response);
      // $("#name").fadeOut(500, () => { $("#name").html(response).fadeIn(500); });
      $(".icon_refresh").removeClass("spinning");
      $("#name").css("opacity", 1);
      $('#name').removeClass('popDat')[0].offsetHeight;
      $('#name').addClass('popDat');
      console.log("Name generation complete.");
    });
    request.fail(function (jqXHR, textStatus, errorThrown) { console.log("Opps! There was an error."); $(".icon_refresh").removeClass("spinning"); }); 

    const allDone = "Done.";
    return allDone;

  }

  $(".select_option").click(function() {
    var theme = $(this).attr('theme');
    $("#temp_theme").val(theme);
    $('.select_option').removeClass('select_option_selected');   
    $('.select_option[theme="' + theme + '"]').addClass('select_option_selected');
  });

  $('#save').on('click', function() {
    var saved_parent1 = $('#parent1').val();
    $('#saved_parent1').val(saved_parent1);
    var saved_parent2 = $('#parent2').val();
    $('#saved_parent2').val(saved_parent2);
    var temp_theme = $('#temp_theme').val();
    $('#saved_theme').val(temp_theme);
    var modal = document.querySelector(".modal_info");
    setTimeout(function() { modal.close(); }, 200); 
    $(".modal").css("transform", "scale(0.8)");
    $(".modal").css("opacity", "0");
    
    $("#name").css("opacity", 0);
    $('#name > span').html("");
    refreshName();
    $("#name").css("opacity", 1);
    $('#name').removeClass('popDat')[0].offsetHeight;
    $('#name').addClass('popDat');
  });

  $('#refresh').on('click', function() {
    $(".icon_refresh").addClass("spinning").css("animation-play-state", "running"); 
    $("#name").css("opacity", 0);
    $('#name > span').html("");
    refreshName()
    .then(result => {
      console.log('Refreshing name... ', result);
    })
    .catch(error => {
      console.error('Error: ', error);
    });




  });

});