(function () {

  const previewFrame = document.getElementById('preview_frame');

  initDataOptions();
  initResponsiveMode();

  /**
   * Functions
   */

  function initDataOptions() {
    const dataOptionsSelect = document.getElementById('data-options');
    if (!dataOptionsSelect) {
      return;
    }

    dataOptionsSelect.addEventListener('change', function () {
      previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
    });
  }

  function initResponsiveMode() {

    document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
      input.addEventListener('change', (event) => {
        const mode = event.target.value;

        previewFrame.classList.remove('breakpoint--desktop');
        previewFrame.classList.remove('breakpoint--tablet');
        previewFrame.classList.remove('breakpoint--mobile');

        previewFrame.classList.add('breakpoint--' + mode);
      });
    });
  }

})();