/**
 * 2007-2019 PrestaShop.
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 */
import Pickr from '@simonwep/pickr';
import Vue from 'vue/dist/vue.min';
window.Vue = Vue;

import "material-design-icons/iconfont/material-icons.css";
import '@simonwep/pickr/dist/themes/classic.min.css'
import './back.scss';

$(window).ready(function () {
  // Tab Content
  var imgSelected;
  // Tab Content : Change position
  $('.listing-body').sortable({
    update: function () {
      var blocks = [];
      $('.listing-general-rol').each(function () {
        blocks.push($(this).attr('data-block'));
      });

      $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: psr_controller_block_url,
        data: {
          ajax: true,
          action: 'UpdatePosition',
          blocks: blocks,
        },
        success: function (data) {
          if (data == 'success') {
            showSuccessMessage(successPosition);
          }  else {
            showErrorMessage(errorPosition);
          }
        }
      });
    }
  });

  // Tab Content : Set active/inactive
  $(document).on('click', '.listing-row .switch-input', (e) => {
    var switchIsOn = $(e.target).hasClass('-checked');
    var status = switchIsOn ? 1 : 0;

    $(e.target).parent().find('.switch_text').hide();
    if (switchIsOn) {
      $('input', e.target).attr('checked', false);
      $(e.target).removeClass('-checked');
      $(e.target).parent().find('.switch-off').show();
    } else {
      $('input', e.target).attr('checked', true);
      $(e.target).addClass('-checked');
      $(e.target).parent().find('.switch-on').show();
    }

    $.ajax({
      url: psr_controller_block_url,
      type: 'POST',
      dataType: 'JSON',
      async: false,
      data: {
        controller: psr_controller_block,
        action: 'changeBlockStatus',
        idpsr: $(e.target).parent().attr('data-cart_psreassurance_id'),
        status: status,
        ajax: true,
      },
      success: (data) => {
        if (data === 'success') {
          showNoticeMessage(block_updated);
        } else {
          showErrorMessage(active_error);
        }
      }
    });
  });

  // Tab Content : Add
  $(document).on('click', '.psre-add', function () {
    $('.landscape').show();

    $('#reminder_listing').removeClass('active').addClass('inactive');
    $('#blockDisplay').removeClass('inactive').addClass('active');
    $('.show-rea-block').removeClass('active').addClass('inactive');

    $('.panel-body-0').removeClass('inactive').addClass('active');
    $('#saveContentConfiguration').attr('data-id', '');

    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);

    var landscape = $('.panel-body-0 .psr-picto').attr('src');
    if (typeof landscape === 'undefined') {
      $('.psr-picto:visible').hide();
      $('.svg_chosed_here:visible').hide();
      $('.landscape').show();
    }
  });

  // Tab Content : Delete
  $(document).on('click', '.psre-delete', function () {
    var idBlock = $(this).data('id');
    if (!confirm(txtConfirmRemoveBlock)) {
      return;
    }
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: psr_controller_block_url,
      data: {
        ajax: true,
        action: 'DeleteBlock',
        idBlock: idBlock,
      },
      success: function (data) {
        if (data === 'success') {
          // Remove line
          $('div[data-block="'+idBlock+'"]').remove();
        } else {
          showErrorMessage(errorRemove);
        }
      },
      error: function (err) {
        console.log(err);
      }
    });
  });

  // Tab Content : Edit
  $(document).on('click', '.psre-edit', function () {
    $('.landscape').hide();

    $('#reminder_listing').removeClass('active').addClass('inactive');
    $('#blockDisplay').removeClass('inactive').addClass('active');
    $('.show-rea-block').removeClass('active').addClass('inactive');

    var id = $(this).data('id');
    $('.panel-body-' + id).removeClass('inactive').addClass('active');
    $('#saveContentConfiguration').attr('data-id', id);

    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);

    var landscape = $('.panel-body-' + id + ' .psr-picto').attr('src');
    if (typeof landscape === 'undefined') {
      $('.psr-picto:visible').hide();
      $('.svg_chosed_here:visible').hide();
      $('.landscape').show();
    }
  });

  // Tab Content : Edit : Language
  $(document).on('change', 'select[name="psr-language"]', (e) => {
    var lang = $(e.target).val();

    $('.content_by_lang').removeClass('active').addClass('inactive');
    $('.content_by_lang.lang-' + lang).addClass('active');
    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);
  });

  // Tab Content : Edit : Modify icon
  $(document).on('click', '.modify_icon', (e) => {
    let position = $(e.target).offset();
    let offset = $(e.target).width();
    let top = position.top / 2;
    let left = position.left / 2 - offset;

    $('#reassurance_block')
      .show().css('top', top + 'px').css('left', left + 'px');
  });

  // Tab Content : Edit : Modify icon : Click outside
  $(document).on('click', 'body', (e) => {
    let isInside = $(e.target).closest('.modify_icon').length;
    let isPopin = $(e.target).closest('#reassurance_block').length;

    if (!isInside && !isPopin) {
      $("#reassurance_block").fadeOut(300);
    }
  });

  // Tab Content : Edit : Modify icon : Tabs
  $(document).on('click', '#reassurance_block .category_select div img', (e) => {
    var category = $(e.target).attr('data-id');
    // Change the tab
    $('#reassurance_block .category_select div').removeClass('active');
    $(e.target).parent().addClass('active');
    // Change the tab content
    $('#reassurance_block .category_reassurance').removeClass('active');
    $('#reassurance_block .cat_' + category).addClass('active');
  });

  // Tab Content : Edit : Select icon
  $(document).on('click', '#reassurance_block .category_reassurance .svg', (e) => {
    var svg = $(e.target)[0].outerHTML;

    // Popin : select the icon
    $('#reassurance_block .category_reassurance img.svg.selected').removeClass('selected');
    $(e.target).addClass('selected');
    // Hide the initial icon
    $('.landscape').hide();
    $('.psr-picto').hide();
    // Show the image
    $('.svg_chosed_here').show();
    $('.svg_chosed_here:visible').html(svg);
    // Popin : hide it
    $('#reassurance_block').fadeOut(300);
  });

  // Tab Content : Edit : Select none
  $(document).on('click', '#reassurance_block .select_none', (e) => {
    var psrPicto = $('.psr-picto:visible');
    psrPicto.attr('src', 'undefined').hide();

    // Un-select icon in the popin
    $('#reassurance_block .category_reassurance img.svg').removeClass('selected');
    // Hide the icon seected
    $('.svg_chosed_here:visible').hide();
    // Display the landscape icon
    $('.landscape').show();
    // Hide the popin
    $('#reassurance_block').fadeOut(300);
  });

  // Tab Content : Edit : Custom Icon
  $(document).on('change', '.show-rea-block.active input[type="file"]', function (e) {
    var files = $(this)[0].files;
    // Change the label
    var jqLabel = $(this).parents('.input-group').find('label.file_label');
    var label = jqLabel.attr('data-label');
    if (files.length === 1) {
      label = files.length + ' file selected'
    }
    jqLabel.html(label);

    // Preview the image
    var idPreview = $(this).attr('data-preview');
    if (files && files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        var jqPreview = $('.' + idPreview);
        if (jqPreview.hasClass('hide')) {
          jqPreview.removeClass('hide');
        }
        jqPreview.attr('src', e.target.result);
        console.log(e.target.result)
      };
      reader.readAsDataURL(files[0]);

      imgSelected = files[0];

      // Hide the initial icon
      $('.landscape').hide();
      $('.psr-picto').hide();
      $('.picto_by_module').hide();
      // Show the image
      $('.svg_chosed_here').show();
    }
  });

  // Tab Content : Edit : MaxLength
  $(document).on('keyup keydown', '.show-rea-block.active .content_by_lang input[type="text"], .show-rea-block.active .content_by_lang textarea', function () {
    var maxLength = 100;
    var val = $(this).val();
    var valLength = val.length;
    if (val.length > maxLength) {
      $(this).val(val.substring(0, maxLength - 1));
      valLength = $(this).val().length;
    }
    if ($(this).is('input:text')) {
      $('.limit_text:visible').text(valLength);
    } else {
      $('.limit_description:visible').text(valLength);
    }
  });

  // Tab Content : Edit : Return
  $(document).on('click', '#blockDisplay .refreshPage', function () {
    location.reload();
  });

  // Tab Content : Edit : Redirect
  $(document).on('change', 'input[name^="PSR_REDIRECTION_"]', (e) => {
    function setEnabledPSR(psr, state) {
      if (state) {
        $('.psr-' + psr).removeClass('inactive').addClass('active');
      } else {
        $('.psr-' + psr).removeClass('active').addClass('inactive');
      }
    }

    switch ($(e.target).val()) {
      case '0':
        setEnabledPSR('cms', false);
        setEnabledPSR('url', false);
        break;
      case '1':
        setEnabledPSR('cms', true);
        setEnabledPSR('url', false);
        break;
      case '2':
        setEnabledPSR('cms', false);
        setEnabledPSR('url', true);
        break;
    }
  });

  // Tab Content : Edit : Redirect : URL
  $(document).on('keyup', '.block_url:visible', (e) => {
    var url = $(e.target).val();
    var pattern_for_url = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
    var pattern_for_http = /(http(s)?:\/\/)/g;

    // If it is a real URL :
    if (pattern_for_url.test(url)) {
      $(e.target).css('background', '#fff');
      if (!pattern_for_http.test(url)) {
        $(e.target).val('http://' + url);
      }
    } else {
      $(e.target).css('background', '#ffecec');
    }
  });

  // Tab Content : Edit : Save
  $(document).on('click', '#saveContentConfiguration', function () {
    var dataToSave = {};
    var blockId = $(this).attr('data-id');
    var imgIcon = $('.psr_picto_showing:visible img.psr-picto');
    var iconSrc = imgIcon.attr('src');
    var iconReplaced = $('.svg_chosed_here img.svg').attr('src');
    if (typeof iconReplaced !== 'undefined') {
      iconSrc = iconReplaced;
    }

    var minimalData = false;
    $('.show-rea-block.active .content_by_lang').each(function (index, elem) {
      var lang = $(elem).attr('data-lang');
      var type = $(elem).attr('data-type');
      if (!dataToSave.hasOwnProperty(lang)) {
        dataToSave[lang] = {};
      }
      if (!dataToSave[lang].hasOwnProperty(type)) {
        dataToSave[lang][type] = '';
      }
      if (type === 'description') {
        dataToSave[lang][type] = $('textarea', elem).val();
      } else if (typeof($('input', elem).val()) != 'undefined') {
        dataToSave[lang][type] = $('input', elem).val();
      }
      if (!minimalData && lang == psr_lang && type == 'title' && dataToSave[lang][type].length > 0) {
        minimalData = true;
      }
    });
    if (!minimalData) {
      showErrorMessage(min_field_error);
      return;
    }

    var formData = new FormData();
    formData.append('ajax', true);
    formData.append('action', 'SaveBlockContent');
    formData.append('file', imgSelected);
    formData.append('id_block', blockId);
    formData.append('lang_values', JSON.stringify(dataToSave));
    formData.append('picto', iconSrc);
    formData.append('typelink', $('input[name="PSR_REDIRECTION_' + blockId + '"]:checked').val());
    formData.append('id_cms', $('select[name="ID_CMS_' + blockId + '"]').val());

    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: psr_controller_block_url,
      contentType: false,
      processData: false,
      data: formData,
      success: function (data) {
        showSuccessMessage(psre_success);
        setTimeout(location.reload(), 1800);
      }
    });
  });

  // Tab Display
  var vMenu = new Vue({
    el: '#menu',
    data: {
      selectedTabName: currentPage,
    },
    methods: {
      makeActive: function (item) {
        this.selectedTabName = item;
        window.history.pushState({}, '', moduleAdminLink.replace(/\amp;/g, '') + '&page=' + item);
      },
      isActive: function (item) {
        if (this.selectedTabName !== item) {
          return false;
        }
        $('.psr_menu').addClass('addons-hide');
        $('.psr_menu#' + item).removeClass('addons-hide');

        return true;
      }
    }
  });

  // Tab Display : Save Position
  $(document).on('change', 'input[name="PSR_HOOK_CHECKOUT"],input[name="PSR_HOOK_HEADER"],input[name="PSR_HOOK_FOOTER"],input[name="PSR_HOOK_PRODUCT"]', function () {
    var selector = '';
    switch ($(this).attr('name')) {
      case 'PSR_HOOK_CHECKOUT':
        selector = 'checkout';
        break;
      case 'PSR_HOOK_HEADER':
        selector = 'header';
        break;
      case 'PSR_HOOK_FOOTER':
        selector = 'footer';
        break;
      case 'PSR_HOOK_PRODUCT':
        selector = 'product';
        break;
    }

    $('.psr-' + selector + '-grey').addClass('active');
    $('.psr-' + selector + '-color').removeClass('active');

    $(this).nextAll('.psr-' + selector + '-grey').removeClass('active');
    $(this).nextAll('.psr-' + selector + '-color').addClass('active');
    savePositionByHook($(this).attr('name'), $(this).val());
  });
  function savePositionByHook(hook, value) {
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: psr_controller_block_url,
      data: {
        ajax: true,
        action: 'SavePositionByHook',
        hook: hook,
        value: value,
      },
      success: function (data) {
        if (data === 'success') {
          showSuccessMessage(successPosition);
        } else {
          showErrorMessage(errorPosition);
        }
      }
    });
  }

  // Tab Appearance
  var pickrComponents = {
    // Main components
    preview: true,
    opacity: false,
    hue: true,

    // Input / output Options
    interaction: {
      hex: false,
      rgba: false,
      hsla: false,
      hsva: false,
      cmyk: false,
      input: true,
      clear: false,
      save: true
    }
  };
  var pickr1 = Pickr.create({
    el: '.ps_colorpicker1',
    default: psr_icon_color,
    defaultRepresentation: 'HEX',
    closeWithKey: 'Escape',
    adjustableNumbers: true,
    components: pickrComponents
  });
  pickr1.on('change', (...args) => {
    let pickrColor = pickr1.getColor();
    let hexaColor = pickrColor.toHEXA().toString();
    $('.psr_icon_color').val(hexaColor);
  });

  var pickr2 = Pickr.create({
    el: '.ps_colorpicker2',
    default: psr_text_color,
    defaultRepresentation: 'HEX',
    closeWithKey: 'Escape',
    adjustableNumbers: true,
    components: pickrComponents
  });
  pickr2.on('change', (...args) => {
    let pickrColor = pickr2.getColor();
    let hexaColor = pickrColor.toHEXA().toString();
    $('.psr_text_color').val(hexaColor);
  });

  // Tab Appearance : Save Color
  $(document).on('click', '#saveConfiguration', function () {
    var color1 = $('#color_1').val();
    var color2 = $('#color_2').val()
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: psr_controller_block_url,
      data: {
        ajax: true,
        action: 'SaveColor',
        color1: color1,
        color2: color2,
      },
      success: function (data) {
        if (data === 'success') {
          showSuccessMessage(psre_success);
        } else {
          showErrorMessage(active_error);
        }
      }
    });
  });
});

