jQuery(document).ready(function ($) {
  $("#seed-fonts-tabs").tabs();

  /* Cache selectors */
  var inputEnable = $("#seed-fonts-is-enabled"),
    inputCSS = $("#seed-fonts-css-generated"),
    inputSelectors = $("#seed-fonts-selectors"),
    inputGoogleFonts = $("#seed-fonts-is-google-fonts"),
    inputGoogleFontName = $("#seed-fonts-google-font-name"),
    inputFonts = $("#seed-fonts-font"),
    inputImportant = $("#seed-fonts-is-important"),
    inputFontWeight = $("#seed-fonts-weight"),
    inputBodyEnable = $("#seed-fonts-body-is-enabled"),
    inputBodyCSS = $("#seed-fonts-body-css-generated"),
    inputBodySelectors = $("#seed-fonts-body-selectors"),
    inputBodyGoogleFonts = $("#seed-fonts-body-is-google-fonts"),
    inputBodyGoogleFontName = $("#seed-fonts-body-google-font-name"),
    inputBodyFonts = $("#seed-fonts-body-font"),
    inputBodyWeight = $("#seed-fonts-body-weight"),
    inputBodySize = $("#seed-fonts-body-size"),
    inputBodySizeUnit = $("#seed-fonts-body-size-unit"),
    inputBodyLineheight = $("#seed-fonts-body-lineheight"),
    inputBodyImportant = $("#seed-fonts-body-is-important"),
    formSeedFonts = $("#seed-fonts-form");

  /* Function to ouput CSS */
  function seed_fonts_generate_css() {
    var css = "";
    var ggfont = inputGoogleFontName.val();
    ggfont = ggfont.replace(/ +(?= )/g, "");

    if (inputSelectors.val() != null && inputSelectors.val() != "")
      css += inputSelectors.val() + " ";

    css += "{\r\n";
    css +=
      '  font-family: "' +
      (inputGoogleFonts.prop("checked") ? ggfont : inputFonts.val()) +
      '", san-serif' +
      (inputImportant.prop("checked") ? " !important" : "") +
      ";\n";
    if (inputFontWeight.val() != null && inputFontWeight.val() != "")
      css +=
        "  font-weight: " +
        inputFontWeight.val() +
        (inputImportant.prop("checked") ? " !important" : "") +
        ";\n";
    css += "}";

    inputCSS.val(css);
  }

  function seed_fonts_body_generate_css() {
    css = "";
    var ggfont = inputBodyGoogleFontName.val();
    ggfont = ggfont.replace(/ +(?= )/g, "");

    if (inputBodySelectors.val() != null && inputBodySelectors.val() != "")
      css += inputBodySelectors.val() + " ";

    css += "{\r\n";
    css +=
      '  font-family: "' +
      (inputBodyGoogleFonts.prop("checked") ? ggfont : inputBodyFonts.val()) +
      '", san-serif' +
      (inputBodyImportant.prop("checked") ? " !important" : "") +
      ";\n";
    if (inputBodySize.val() != null && inputBodySize.val() != "")
      css +=
        "  font-size: " +
        inputBodySize.val() +
        inputBodySizeUnit.val() +
        (inputBodyImportant.prop("checked") ? " !important" : "") +
        ";\n";
    if (inputBodyWeight.val() != null && inputBodyWeight.val() != "")
      css +=
        "  font-weight: " +
        inputBodyWeight.val() +
        (inputBodyImportant.prop("checked") ? " !important" : "") +
        ";\n";
    if (inputBodyLineheight.val() != null && inputBodyLineheight.val() != "")
      css +=
        "  line-height: " +
        inputBodyLineheight.val() +
        (inputBodyImportant.prop("checked") ? " !important" : "") +
        ";\n";
    css += "}";

    inputBodyCSS.val(css);
  }

  /* Conditional Logic */
  function seed_fonts_is_enabled() {
    var is_enabled = inputEnable.prop("checked");

    inputFonts.prop("disabled", !is_enabled);
    inputGoogleFonts.prop("disabled", !is_enabled);
    inputGoogleFontName.prop("disabled", !is_enabled);
    inputFontWeight.prop("disabled", !is_enabled);
    inputSelectors.prop("disabled", !is_enabled);
    inputImportant.prop("disabled", !is_enabled);
    inputCSS.toggle(is_enabled);
  }

  function seed_fonts_is_google_fonts() {
    var is_googlefonts = inputGoogleFonts.prop("checked");
    var weight = $("#seed-fonts-weight").val();
    var font = inputFonts.val();
    if (is_googlefonts) {
      $("#seed-fonts-google-font-name").closest("tr").show();
      $("#seed-fonts-font").closest("tr").hide();
      inputFontWeight
        .empty()
        .append($("#seed-fonts-all-weights").children().clone())
        .val(weight);
    } else {
      $("#seed-fonts-google-font-name").closest("tr").hide();
      $("#seed-fonts-font").closest("tr").show();
      inputFontWeight
        .empty()
        .append(
          $("#seed-fonts-" + font + "-weights")
            .children()
            .clone()
        )
        .val(weight);
    }
    if (inputFontWeight.val() == null)
      $("#seed-fonts-weight option:first").attr("selected", "selected");
  }

  function seed_fonts_body_is_enabled() {
    var body_is_enabled = inputBodyEnable.prop("checked");

    inputBodyGoogleFonts.prop("disabled", !body_is_enabled);
    inputBodyGoogleFontName.prop("disabled", !body_is_enabled);
    inputBodyFonts.prop("disabled", !body_is_enabled);
    inputBodyWeight.prop("disabled", !body_is_enabled);
    inputBodySize.prop("disabled", !body_is_enabled);
    inputBodySizeUnit.prop("disabled", !body_is_enabled);
    inputBodyLineheight.prop("disabled", !body_is_enabled);
    inputBodySelectors.prop("disabled", !body_is_enabled);
    inputBodyImportant.prop("disabled", !body_is_enabled);
    inputBodyCSS.toggle(body_is_enabled);
  }

  function seed_fonts_body_is_google_fonts() {
    var body_is_googlefonts = inputBodyGoogleFonts.prop("checked");
    if (body_is_googlefonts) {
      $("#seed-fonts-body-google-font-name").closest("tr").show();
      $("#seed-fonts-body-font").closest("tr").hide();
    } else {
      $("#seed-fonts-body-google-font-name").closest("tr").hide();
      $("#seed-fonts-body-font").closest("tr").show();
    }
  }

  /* Trigger functions when DOM is ready */
  seed_fonts_generate_css();
  seed_fonts_body_generate_css();
  seed_fonts_is_enabled();
  seed_fonts_is_google_fonts();
  seed_fonts_body_is_enabled();
  seed_fonts_body_is_google_fonts();

  /* If using Google Fonts */
  inputGoogleFonts.on("change", function () {
    seed_fonts_is_google_fonts();
    seed_fonts_generate_css();
  });
  inputBodyGoogleFonts.on("change", function () {
    seed_fonts_body_is_google_fonts();
    seed_fonts_body_generate_css();
  });

  /* Output CSS live */
  inputEnable.on("change", function () {
    seed_fonts_is_enabled();
  });
  inputFonts.on("change", function () {
    var font = inputFonts.val();
    var weight = inputFontWeight.val();

    inputFontWeight
      .empty()
      .append(
        $("#seed-fonts-" + font + "-weights")
          .children()
          .clone()
      )
      .val(weight);

    if (inputFontWeight.val() == null)
      $("#seed-fonts-weight option:first").attr("selected", "selected");

    seed_fonts_generate_css();
  });

  $("#seed-fonts-weight, #seed-fonts-is-important").on("change", function () {
    seed_fonts_generate_css();
  });

  inputSelectors.on("keyup focusout", function () {
    seed_fonts_generate_css();
  });
  inputGoogleFontName.on("keyup focusout", function () {
    seed_fonts_generate_css();
  });

  inputBodyGoogleFontName.on("keyup focusout", function () {
    seed_fonts_body_generate_css();
  });

  inputBodyEnable.on("change", function () {
    seed_fonts_body_is_enabled();
  });

  inputBodyFonts.on("change", function () {
    seed_fonts_body_generate_css();
  });

  inputBodySize.on("keyup focusout", function () {
    seed_fonts_body_generate_css();
  });

  inputBodySizeUnit.on("change", function () {
    seed_fonts_body_generate_css();
  });

  inputBodyLineheight.on("keyup focusout", function () {
    seed_fonts_body_generate_css();
  });

  $("#seed-fonts-body-weight, #seed-fonts-body-is-important").on(
    "change",
    function () {
      seed_fonts_body_generate_css();
    }
  );

  inputBodySelectors.on("keyup focusout", function () {
    seed_fonts_body_generate_css();
  });

  formSeedFonts.on("submit", function (event) {
    formSeedFonts.css("opacity", "0.5");
  });
});