window.axios = require('axios');
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};
let _ = require('lodash');

import moment from 'moment'
// Configure moment
moment.locale('fr', {
    months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
    monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
    monthsParseExact : true,
    weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
    weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
    weekdaysMin : 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
    weekdaysParseExact : true,
    longDateFormat : {
        LT : 'HH:mm',
        LTS : 'HH:mm:ss',
        L : 'DD/MM/YYYY',
        LL : 'D MMMM YYYY',
        LLL : 'D MMMM YYYY HH:mm',
        LLLL : 'dddd D MMMM YYYY HH:mm'
    },
    calendar : {
        sameDay : '[Aujourd’hui à] LT',
        nextDay : '[Demain à] LT',
        nextWeek : 'dddd [à] LT',
        lastDay : '[Hier à] LT',
        lastWeek : 'dddd [dernier à] LT',
        sameElse : 'L'
    },
    relativeTime : {
        future : 'dans %s',
        past : 'il y a %s',
        s : 'quelques secondes',
        m : 'une minute',
        mm : '%d minutes',
        h : 'une heure',
        hh : '%d heures',
        d : 'un jour',
        dd : '%d jours',
        M : 'un mois',
        MM : '%d mois',
        y : 'un an',
        yy : '%d ans'
    },
    dayOfMonthOrdinalParse : /\d{1,2}(er|e)/,
    ordinal : function (number) {
        return number + (number === 1 ? 'er' : 'e');
    },
    meridiemParse : /PD|MD/,
    isPM : function (input) {
        return input.charAt(0) === 'M';
    },
    // In case the meridiem units are not separated around 12, then implement
    // this function (look at locale/id.js for an example).
    // meridiemHour : function (hour, meridiem) {
    //     return /* 0-23 hour, given meridiem token and hour 1-12 */ ;
    // },
    meridiem : function (hours, minutes, isLower) {
        return hours < 12 ? 'PD' : 'MD';
    },
    week : {
        dow : 1, // Monday is the first day of the week.
        doy : 4  // Used to determine first week of the year.
    }
});

moment.locale('fr');
Vue.prototype.moment = moment

// Vue
import Vue from 'vue';
// Vuex
import Vuex from 'vuex';
// Select
import vSelect from 'vue-select';
Vue.component('v-select', vSelect);
// Infinite Loading
import InfiniteLoading from 'vue-infinite-loading';
// Copy To Clipboard
import VueClipboards from 'vue-clipboards';
// Dialog
import Dialog from 'vue-dialog-loading';
const OpenSeaDragonComponent = Vue.component(
    'img-preview',
    require('./components/OpenSeadragonComponent.vue').default
);
const DarkroomComponent = Vue.component(
    'img-edit',
    require('./components/DarkroomComponent.vue').default
);
/* MEDIA MANAGER */
// Folder Component
const FolderComponent = Vue.component(
    'mm-folder',
    require('./components/media-manager/FolderComponent.vue').default
);
// Basket Component
const BasketComponent = Vue.component(
    'mm-basket',
    require('./components/media-manager/BasketComponent.vue').default
);
// Search
const SideHeaderComponent = Vue.component(
    'mm-side-header',
    require('./components/media-manager/SideHeaderComponent.vue').default
);
const FiltersComponent = Vue.component(
    'mm-filters',
    require('./components/media-manager/FiltersComponent.vue').default
);
const SorterComponent = Vue.component(
    'mm-sorter',
    require('./components/media-manager/SorterComponent.vue').default
);
// Display
const DisplayComponent = Vue.component(
    'mm-display',
    require('./components/media-manager/DisplayComponent.vue').default
);
const ActionsComponent = Vue.component(
    'mm-actions',
    require('./components/media-manager/ActionsComponent.vue').default
);
/* MEDIA EDITOR */
const EditorComponent = Vue.component(
    'mm-me-edit',
    require('./components/media-manager/media-editor/EditComponents.vue').default
);
const EditorTabPreviewComponent = Vue.component(
    'mm-me-tab-preview',
    require('./components/media-manager/media-editor/tabs/PreviewComponent.vue').default
);
const EditorTabEditComponent = Vue.component(
    'mm-me-tab-edit',
    require('./components/media-manager/media-editor/tabs/EditComponent.vue').default
);
const EditorTabLinksComponent = Vue.component(
    'mm-me-tab-links',
    require('./components/media-manager/media-editor/tabs/LinksComponent.vue').default
);
const EditorTabHistoryComponent = Vue.component(
    'mm-me-tab-history',
    require('./components/media-manager/media-editor/tabs/HistoryComponent.vue').default
);

Vue.use(Vuex);
Vue.use(InfiniteLoading);
Vue.use(VueClipboards);
Vue.use(Dialog, {
    dialogBtnColor: '#0f0'
});

const store = new Vuex.Store({
    state: {
        reload: '',
        sujet: 0,
        folder: -1,
        filters: [],
        role: 2,
        media: {},
        typesvue: [],
        typesvariantes: [],
        formats: [],
        grabbed: [],
        baskets: [],
        mediaTab: 'preview'
    },
    mutations: {
        Reload (state, payload) {
            state.reload = payload.reload;
        },
        updateSujet (state, payload) {
          state.sujet = payload.sujet;
        },
        updateTypesVue (state, payload) {
            state.typesvue = payload.typesvue;
        },
        updateTypesVariantes(state, payload) {
            state.typesvariantes = payload.typesvariantes;
        },
        updateFolder (state, payload) {
            state.folder = payload.folder;
        },
        updateFilters (state, payload) {
            state.filters = payload.filters;
        },
        updateMedia (state, payload) {
            state.media = payload.media;
        },
        updateRole (state, payload) {
            state.role = payload.role;
        },
        updateGrabbed (state, payload) {
            state.grabbed = payload.grabbed;
        },
        updateBaskets (state, payload) {
            state.baskets = payload.baskets;
        },
        updateFormats (state, payload) {
            state.formats = payload.formats;
        },
        changeMediaTab (state,payload) {
            state.mediaTab = payload.tab;
        }
    }
});

new Vue({
    el: '#vue-app',
    store,
    components: {
        OpenSeaDragonComponent, DarkroomComponent,
        BasketComponent, FolderComponent, SideHeaderComponent, FiltersComponent, SorterComponent, DisplayComponent, ActionsComponent,
        EditorComponent, EditorTabPreviewComponent, EditorTabEditComponent, EditorTabLinksComponent, EditorTabHistoryComponent
    }
});


'use strict';

try {
    window.$ = window.jQuery = require('jquery')
} catch (e) {}

jQuery.fn.scrollParent = function() {
  var overflowRegex = /(auto|scroll)/,
  position = this.css( "position" ),
  excludeStaticParent = position === "absolute",
  scrollParent = this.parents().filter( function() {
    var parent = $( this );
    if ( excludeStaticParent && parent.css( "position" ) === "static" ) {
      return false;
    }
    var overflowState = parent.css(["overflow", "overflowX", "overflowY"]);
    return (overflowRegex).test( overflowState.overflow + overflowState.overflowX + overflowState.overflowY );
  }).eq( 0 );

  return position === "fixed" || !scrollParent.length ? $( this[ 0 ].ownerDocument || document ) : scrollParent;
};

// ---- Configuration de base des filtres médias
$(window).data('offset', 0);
$(window).data('limit', 50);
$(window).data('currentFolder', 0);
$(window).data('currentBasket', null);
$(window).data('filter', {});

//confirm popup
$.fancyConfirm = function( opts ) {
    opts  = $.extend( true, {
      title     : 'Are you sure?',
      message   : '',
      okButton  : 'OK',
      noButton  : 'Cancel',
      callback  : $.noop
    }, opts || {} );

    $.fancybox.open({
      type : 'html',
      src  :
      '<div class="fc-content">' +
      '<h3>' + opts.title   + '</h3><hr/>' +
       '<p class="tcenter"><i class="fa fa-question-circle"></i>' +
      opts.message + '</p>' +
      '<hr/><p class="button_bar">' +
      '<a data-value="0" data-fancybox-close class="btn btn-black mr-10 btn-square" >' + opts.noButton + '</a>' +
      '<button data-value="1" data-fancybox-close class="btn btn-square">' + opts.okButton + '</button>' +
      '</p>' +
      '</div>',
      opts : {
        animationDuration : 350,
        animationEffect   : 'material',
        modal : true,
        baseTpl :
        '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
        '<div class="fancybox-bg"></div>' +
        '<div class="fancybox-inner">' +
        '<div class="fancybox-stage"></div>' +
        '</div>' +
        '</div>',
        afterClose : function( instance, current, e ) {
          var button = e ? e.target || e.currentTarget : null;
          var value  = button ? $(button).data('value') : 0;

          opts.callback( value );
        }
      }
    });
  }


  // Message
$.fancyMessage = function( opts ) {
    opts  = $.extend( true, {
      title     : 'Are you sure?',
      message   : '',
	  type   : '',
    }, opts || {} );

    $.fancybox.open({
      type : 'html',
      src  :
     '<div class="fc-content '+opts.type+'">' +
      '<h3>' + opts.title   + '</h3><hr/>' +
          '<p class="tcenter"><i class="fa fa-info-circle"></i></i><i class="fa fa-exclamation-triangle"></i>' +
	 opts.message + '</p>' +
	 '<hr/><p class="button_bar">' +
	 '<a data-value="0" data-fancybox-close class="btn btn-square '+
	 (opts.type == "error" ? 'btn-red':'')+' " >Ok</a>' +
	 '</p>' +
      '</div>',
      opts : {
        animationDuration : 350,
        animationEffect   : 'material',
        modal : false,
        baseTpl :
        '<div class="fancybox-container fc-container high-level" role="dialog" tabindex="-1">' +
        '<div class="fancybox-bg"></div>' +
        '<div class="fancybox-inner">' +
        '<div class="fancybox-stage"></div>' +
        '</div>' +
        '</div>'
      }
    });
  }

// ---- Header :  Menu utilisateur
$(".userbar").on('click',function(event) {
	$(".submenu").toggle();
});

$(document).mouseup(function(e) {

	// ---- Masque le menu utilisateur
    var container = $(".userbar");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".submenu").hide();
    }

	// ---- Masque le menu des paniers
	var cartMenu = $(".panier_side_menu .panier_menu");
	if (!cartMenu.is(e.target) && cartMenu.has(e.target).length === 0 && $("#menu_panier").has(e.target).length === 0) {
		cartMenu.hide();
	}

	// ---- Masque les filtres de la bar de recherche
	var filter_list = $(".filter_selector");
	if (!filter_list.is(e.target) && filter_list.has(e.target).length === 0) {
		$(".filter_selector .list").hide();
	}


	// ---- déselectionne les éléments si on clique en dehors
	var parentOffset = $('.media_container').parent().offset();
	if ( ($(e.target).hasClass('media_container') && event.pageX- parentOffset.left < $('.media_container')[0]['clientWidth'] ) || $(e.target).hasClass('wrapper')) {
		$(".imageItem").attr("aria-grabbed", "false");
		$(".imageItem").removeClass('flip');
	}

});

// ---- Header :  Ouverture formulaire de contact
$(".contact_btn").on('click',function(event) {
	event.preventDefault();
	var subjectId = 1;
	subjectId = $(this).attr("data-subjectId");

	$.fancybox.open({
		src  : '#form_contact',
		type : 'inline',
		opts : {
			animationDuration : 350,
			animationEffect   : 'material',
			beforeShow : function( instance, current ) {
				$(".form_contact_type").val(subjectId);
				$(".form_contact_check_ko").hide();
				$(".form_contact_ok").hide();
				$(".form_contact_ko").hide();
			}
		}
	});
});

// ---- Header :  fermeture de la popup
$(".close_popup").on('click',function(event) {
	event.preventDefault();
	$.fancybox.close();
});

// ---- Header :  envoi formulaire de contact
$(".form_contact_send").on('click',function(event) {
	event.preventDefault();
	var btn = $(this);
	if($('.form_contact_message').val() == ""){
		$(".form_contact_check_ko").show();
		return false;
	}else{
		$(".form_contact_check_ko").hide();
	}
	btn.addClass('loading');
	$.ajaxSetup({
	  headers: {
	      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	  }
	});

	$.ajax({
		url: '/send-message',
		method: 'POST',
		dataType : 'json',
		data: {
			type: $('.form_contact_type option:selected').text(),
			url: $('.form_contact_url').val(),
			message: $('.form_contact_message').val()
		},
		success: function(result){
			btn.removeClass('loading');
			$(".form_contact_ok").show();
			$('.form_contact_url').val('');
			$('.form_contact_message').val('');
		},
		error: function(jqXHR, textStatus, errorThrown) {
			btn.removeClass('loading');
			$(".form_contact_ko").show();
		}
	});
});