/* global Drupal, jQuery, once */
const $ = jQuery;

import '../../../css/admin.scss';

Drupal.behaviors.gutenbergAdmin = {
  attach(context) {
    const $elements = $(
      once(
        'view-reusable-blocks-item-click',
        '.view-reusable-blocks .views-view-responsive-grid__item, .view-reusable-blocks .views-col',
        context,
      ),
    );

    $($elements)
      .find('input[type="checkbox"]')
      .click((e) => {
        e.stopPropagation();
      });

    $($elements).click((e) => {
      $(e.currentTarget).find('input[type="checkbox"]').click();
    });

    if (context !== document) {
      return;
    }

    $('input[name*="allowed_blocks_"]:not([value*="/all"])').click((ev) => {
      const category = $(ev.currentTarget).val().split('/')[0];
      const checked = $(ev.currentTarget).is(':checked');

      if (checked) {
        return;
      }

      $(`input[name="allowed_blocks_${category}[${category}/all]"]`)
        .not(':disabled')
        .prop('checked', checked);
    });

    $('input[name*="allowed_blocks_core"][value*="/all"]').click((ev) => {
      const category = $(ev.currentTarget).val().split('/')[0];
      const checked = $(ev.currentTarget).is(':checked');

      $(`input[name*="allowed_blocks_${category}[${category}"]`)
        .not(':disabled')
        .prop('checked', checked);
    });

    $(
      '#edit-allowed-custom-blocks-details input[name*="allowed_blocks_"][value*="/all"]',
    ).click((ev) => {
      const category = $(ev.currentTarget).val().split('/')[0];
      const checked = $(ev.currentTarget).is(':checked');

      $(`input[name*="allowed_blocks_${category}[${category}"]`)
        .not(':disabled')
        .prop('checked', checked);
    });

    $('details.more-settings', context).on('toggle', function () {
      if (this.open) {
        this.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest',
        });
      }
    });
  },
};
