'use strict';

import IMask from 'imask';

document.addEventListener('DOMContentLoaded', function() {
  const FIELD_STATUS = document.querySelectorAll('.js-floating-content-item'),
    FIELD_ERROR = document.querySelectorAll('.field-error'),
    FIELD_POSITION = document.querySelectorAll(
      'input[type=radio][name^=fc_back_to_top], input[type=radio][name^=fc_whatsapp]'
    );

  FIELD_STATUS.forEach(element => {
    handleFloatingContent.call(element);
    element.onchange = handleFloatingContent.bind(element);
  });

  FIELD_ERROR.forEach(element => {
    element.onkeyup = handleFieldError.bind(element);
  });

  FIELD_POSITION.forEach(element => {
    element.onchange = handleFieldPosition.bind(element, FIELD_POSITION);
  });

  IMask(document.querySelector('[type=tel]'), {
    mask: '(00) 00000-0000',
  });

  function handleFloatingContent() {
    const CONTAINER_RADIO = this.parentElement.nextElementSibling;
    const RADIO = CONTAINER_RADIO.querySelectorAll('.radio-entry');

    if (this.checked) {
      CONTAINER_RADIO.hidden = false;

      const CHECK_INDEX = /fc_back_to_top/.test(this.name) ? 1 : 0;
      const OTHER_CHECK = FIELD_STATUS[CHECK_INDEX];

      if (OTHER_CHECK.checked) {
        const OTHER_CONTAINER_RADIO = OTHER_CHECK.parentElement.nextElementSibling;
        const OTHER_RADIO_CHECKED = OTHER_CONTAINER_RADIO.querySelector('.radio-entry:checked');

        handleFieldPosition.call(OTHER_RADIO_CHECKED, FIELD_POSITION);
      } else {
        if (RADIO[0]) RADIO[0].checked = true;
      }
    } else {
      CONTAINER_RADIO.hidden = true;
      RADIO.forEach(element => (element.checked = false));
    }
  }

  const openFileManager = document.querySelectorAll('.js-open-file-manager');

  for (const iterator of openFileManager) {
    iterator.addEventListener('click', () => {
      const responsive = iterator.classList.contains('responsive');
      handleFileManager(responsive);
    });
  }

  function handleFileManager(responsive = false) {
    let prefix, options;
    if (responsive) {
      prefix = '#popup_responsive_';
      options = {
        maxWidth: 300,
        maxHeight: 265,
      };
    } else {
      prefix = '#popup_';
      options = {
        maxWidth: 600,
        maxHeight: 530,
      };
    }
    console.log(prefix);
    window.dispatchEvent(
      new CustomEvent('vue-file-manager', {
        detail: {
          callbackFunction: file => {
            document.querySelector(prefix + 'image').value = 'data/' + file.file;
            document.querySelector(prefix + 'thumb').src = file.thumbnail;
          },
          options,
        },
      })
    );
  }

  document.querySelector('.js-btn-clear-image').addEventListener('click', removeImage);
  document.querySelector('.js-btn-clear-responsive-image').addEventListener('click', removeResponsiveImage);

  function removeImage() {
    document.querySelector('#popup_image').value = '';
    document.querySelector('#popup_thumb').src = '../image/no_image.jpg';
  }

  function removeResponsiveImage() {
    document.querySelector('#popup_responsive_image').value = '';
    document.querySelector('#popup_responsive_thumb').src = '../image/no_image.jpg';
  }

});

function handleFieldError() {
  if (this.classList.contains('field-error')) {
    this.classList.remove('field-error');
    this.querySelector('.field-error-message').remove();
  }
}

function handleFieldPosition(field_position) {
  const VALUE = this.value;
  const INPUT_NAME = this.name === 'fc_back_to_top[position]' ? 'fc_whatsapp[position]' : 'fc_back_to_top[position]';

  field_position.forEach(element => {
    if (element.name === INPUT_NAME) {
      element.checked = element.value !== VALUE;
    }
  });
}
