import jQuery from "jquery";
window.jQuery = jQuery; // <- "select2" will check this
window.$ = jQuery;

// This is a hack to fix 'process is not defined'
// Ref article: https://adambien.blog/roller/abien/entry/uncaught_referenceerror_process_is_not
// Based on this filter dropdown works.
window.process = {
  env: {
    NODE_ENV: "development",
  },
};

import "moment";
import "bootstrap";
import "@popperjs/core";
import "flatpickr";
import "trix";
import "@rails/actiontext";
import Select2 from "select2";
import LocalTime from "./local-time"
Select2();

// import '@nathanvda/cocoon'
import "daterangepicker";

document.addEventListener("turbo:load", function () {
  flatpickr("[data-behaviour='date-only']", {
    dateFormat: "d-m-Y",
  });
  flatpickr("[data-behaviour='date-time']", {
    enableTime: true,
  });
  flatpickr("[data-behaviour='filter'][data-filter-type='date']", {
    mode: "range",
  });
  $(".select-2").select2({
    theme: "bootstrap-5",
  });
  LocalTime.start()

  setup_select_2_ajax();
  
  const bsToast = $('[data-behaviour="toast"]')[0];
  if (bsToast) {
    const toast = new bootstrap.Toast(bsToast);
    toast.show();
  }
  var el = $("[data-section='nested-form-body']");
  if (el[0]) {
    Sortable.create(el[0], {
      handle: ".drag-handle",
      animation: 150,
      onUpdate: function (evt) {
        var itemEl = evt.item;
        $("[data-section='nested-form-body'] tr").each(function (index, el) {
          $(el)
            .find(".hidden-position")
            .val(index + 1);
        });
      },
    });
  }
});

$(document).on(
  "click",
  '[data-behaviour="toggle-profile-popup"]',
  function (e) {
    e.stopPropagation();
    $('[data-behaviour="profile-popup"]').toggleClass("hidden");
  }
);

$(document).on("click", function (e) {
  var popup = $('[data-behaviour="profile-popup"]');
  if (!popup.is(e.target) && popup.has(e.target).length === 0) {
    popup.addClass("hidden");
  }
});

$(document).on("click", '[data-section="destroy-attachment"] button', function (e) {
  e.preventDefault();
  var ar_id = $(this).parent('[data-section="destroy-attachment"]').data("ar-id");
  $(this).parent('[data-section="destroy-attachment"]').addClass("hidden");
  $(this).closest('[data-field-type="single_file_upload"]').find('input').removeClass('hidden')
  $(this).append(
    '<input type="text" name="attachment_destroy_ids[]" value="' + ar_id + '"/>'
  );
});

$(document).on('change', '[data-field-type="single_file_upload"] input', function(e) {
  console.log("File changed")
  const [file] = $(this)[0].files
  if (file) {
    // blah.src = URL.createObjectURL(file)
    const upload_div = $(this).closest('[data-field-type="single_file_upload"]')
    $(upload_div).find('input').addClass('hidden')
    $(upload_div).find('[data-section="destroy-attachment"]').removeClass("hidden")
    $(upload_div).find('[data-section="image-preview"]').html(`<div data-section="destroy-attachment" data-attachment-name="listing[media_items_attributes][0]_attachment_attachments">\
        <span class="btn-link">${file.name}</span>\
        <button class="btn-ghost">\
          <i class="fa-regular fa-trash-can"></i>\
        </button>\
      </div>`
    )
    var allowExtention = ".jpg,.bmp,.gif,.png";
    var extention = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
    
    if (allowExtention.indexOf(extention) > -1) {
      var img = $('<img height="50" width="50" class="rounded"/>');
      img.attr("src", URL.createObjectURL(file));
      $(upload_div).find('[data-section="image-preview"]').find('[data-section="destroy-attachment"]').prepend(img);
    }
  }
})

$(document).on('change', '[data-field-type="multi_file_upload"] input', function(e) {
  console.log("File changed")
  const files = $(this)[0].files
  const element_id = $(this).attr('id')
  const upload_div = $(this).closest('[data-field-type="multi_file_upload"]')
  $(upload_div).find('[data-section="image-preview"]').html('')
  if (files) {
    $.each(files, function(index, file) {
      $(upload_div).find('[data-section="destroy-attachment"]').removeClass("hidden");
      $(upload_div).find('[data-section="image-preview"]').append(`<div data-section="destroy-attachment" data-index="${index}" data-attachment-name="${element_id}_attachments">\
          <span class="btn-link">${file.name}</span>\
        </div>`
      )
      var allowExtention = ".jpg,.bmp,.gif,.png";
      var extention = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
      
      if (allowExtention.indexOf(extention) > -1) {
        var img = $('<img height="50" width="50" class="rounded"/>');
        img.attr("src", URL.createObjectURL(file));
        $(upload_div).find('[data-section="image-preview"]').find(`[data-index="${index}"]`).prepend(img);
      }
    })
    
  }
})

$(document).on(
  "click",
  '[data-behaviour="permission-check-box"]',
  function (e) {
    var form_check = $(this).closest(".form-check");
    var form_field = $(this).closest(".form-field");
    if ($(this).is(":checked")) {
      form_check.find(".cm-select-tag").removeClass("hidden");
    } else {
      form_check.find(".cm-select-tag").addClass("hidden");
    }
    if (
      form_field.find('[data-behaviour="permission-check-box"]:checked')
        .length ==
      form_field.find('[data-behaviour="permission-check-box"]').length
    ) {
      form_field
        .find('[data-behaviour="permission-check-all"]')
        .prop("checked", true);
    } else {
      form_field
        .find('[data-behaviour="permission-check-all"]')
        .prop("checked", false);
    }
  }
);

$(document).on(
  "click",
  '[data-behaviour="permission-check-all"]',
  function (e) {
    var form_field = $(this).closest(".form-field");
    if ($(this).is(":checked")) {
      form_field
        .find('[data-behaviour="permission-check-box"]')
        .prop("checked", true);
      form_field.find(".cm-select-tag").removeClass("hidden");
    } else {
      form_field
        .find('[data-behaviour="permission-check-box"]')
        .prop("checked", false);
      form_field.find(".cm-select-tag").addClass("hidden");
    }
  }
);

window.addEventListener("popstate", (e) => window.location.reload());

function setup_select_2_ajax() {
  $(".select-2-ajax").each(function (index, element) {
    $(element).select2({
      ajax: {
        url: $(element)[0]["dataset"].ajaxUrl,
        dataType: "json",
        processResults: (data, params) => {
          return {
            results: data.results,
          };
        },
      },
      minimumInputLength: 0,
    });
  });
}