<% helpers = ActionController::Base.helpers %>

$(() => {
  $('#modal-window').html('<%= escape_javascript(render "shared/dynamic_form/modal") %>');

  $('.select-field select, .linked-fragments-select select').select2({
    theme: 'bootstrap4',
  });
  $('.select-field select[data-tags=true], .linked-fragments-select select[data-tags=true]').one('select2:open', () => {
    $('input.select2-search__field').prop('placeholder', 'Select a value or enter a new one.');
  });
  
  $('#modal-window').modal();
  tinymce.init({
    selector: '.tinymce',
    statusbar: true,
    menubar: false,
    toolbar: 'bold italic | bullist numlist | link | table',
    plugins: 'table autoresize link paste advlist lists',
    browser_spellcheck: true,
    advlist_bullet_styles: 'circle,disc,square', // Only disc bullets display on htmltoword
    target_list: false,
    elementpath: false,
    resize: true,
    autoresize_min_height: 130,
    autoresize_bottom_margin: 10,
    branding: false,
    extended_valid_elements: 'iframe[tooltip] , a[href|target=_blank]',
    paste_auto_cleanup_on_paste: true,
    paste_remove_styles: true,
    paste_retain_style_properties: 'none',
    paste_convert_middot_lists: true,
    paste_remove_styles_if_webkit: true,
    paste_remove_spans: true,
    paste_strip_class_attributes: 'all',
    table_default_attributes: {
      border: 1,
    },
    // editorManager.baseURL is not resolved properly for IE since document.currentScript
    // is not supported, see issue https://github.com/tinymce/tinymce/issues/358
    skin_url: '/tinymce/skins/lightgray',
    content_css: ['<%= helpers.asset_path "/assets/blocks/_tinymce_content.css"  %>'],
  });

  $('#modal_fragment_form').on('ajax:success', (event, response) => {
    if (response.classname === 'research_output') {
      $('#research-outputs-list').html(response.html);
    } else if (response.source === 'list-modal') {
      const queryId = $(event.target).find('.query_id').val();
      $(`table.list-${queryId} tbody`).html(response.html);
    } else {
      const queryId = $(event.target).find('.query_id').val();
      const $select = $(`.select-${queryId} select`);
      $select.html(response.html);
      $select.val(response.fragment_id).trigger('select2:select');
    }
    $('#modal-window').modal('hide');
  }).on('ajax:error', () => {
    console.log('ajax:error');
  });
});