import "../css/style.pcss";

import Vue from "vue";
import { forEachNode } from "./utils";

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
import { cs } from '@fancyapps/ui/dist/fancybox/l10n/cs.esm.js';

import AnimatedArrow from "./components/arrows/AnimatedArrow";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider";
import FullCalendar from "./components/full_calendar/Calendar";
import RegionMap from "./components/RegionMap";
import ViewProvider from "./components/ViewProvider";
import SecondaryViewProvider from "./components/SecondaryViewProvider";
import Popout from "./components/popout/Popout";
import PopoutContent from "./components/popout/PopoutContent";
import PopoutItem from "./components/popout/PopoutItem";
import FooterCollapsible from "./components/footer/FooterCollapsible";
import ScrollIndicator from "./components/ScrollIndicator";
import FaqSectionHeader from "./components/FaqSectionHeader";
import HorizontalScrollable from "./components/HorizontalScrollable";
import CardProgram from "./components/card_program/CardProgram"
import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList";
import Countdown from "./components/countdown/Countdown";

import SlideUpDown from 'vue-slide-up-down';


Vue.component("ui-animated-arrow", AnimatedArrow);
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-full-calendar", FullCalendar);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
Vue.component("ui-secondary-view-provider", SecondaryViewProvider);
Vue.component("ui-popout", Popout);
Vue.component("ui-popout-content", PopoutContent);
Vue.component("ui-popout-item", PopoutItem);
Vue.component("ui-scroll-indicator", ScrollIndicator);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-faq-section-header", FaqSectionHeader);
Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
Vue.component("ui-card-program", CardProgram);
Vue.component("ui-slide-up-down", SlideUpDown);
Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
Vue.component("ui-countdown", Countdown);


Fancybox.bind("[data-fancybox]", {
  l10n: cs
});


import UiApp from "./components/UiApp.vue";



const appFactory = (el, attrs) => {
  // Bootstrap Vue.js.
  new Vue({
    el,
    components: {
      UiApp
    }
  });
};


/**
 * Bootstrap Vue.js application at given Element instance.
 *
 * App properties are passed via data attributes, like:
 *
 * <div class="__vue-root" data-message="Hello" data-app="SomeApp"></div>
 *
 * @param {Element} el DOM Element
 */
function renderVueAppElement(el) {
  const attrs = Object.assign({}, el.dataset);
  return appFactory(el, attrs);
}


function init(event) {
  // Initialize Vue.js apps.
  forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
}

document.addEventListener('DOMContentLoaded', init);