class DemoController {

  constructor($document, FlickityService) {
    'ngInject';

    this.$document = $document;
    this.FlickityService = FlickityService;

    this._activate();

  }

  _activate() {
    this.projectName = 'angular-flickity';
    this.demoDetail = 'injecting a new slide';
    
    this.options = {
        groupCells: true,
        cellAlign: 'left',
        pageDots: true,
        prevNextButtons: false,
    };
    
    // Define our slides
    this.slides = [{
        name: 'Felipe',
        image: 'http://placehold.it/350x150?text=Felipe',
    }, {
        name: 'Benjamin',
        image: 'http://placehold.it/350x150?text=Benjamin',
    }, {
        name: 'John',
        image: 'http://placehold.it/350x150?text=John',
    }];

    this.$document.ready(() => {
        // Get the element that should hold the slider
        this.element = angular.element(document.getElementById('demo-slider'));
        // Save an easy reference to the instance ID
        this.sliderId = this.element[0].id;
        // Initialize our Flickity instance
        this.FlickityService.create(this.element[0], this.sliderId, this.options).then((result) => {
            console.log('Slider created!', result);
        });
    });
  }

  addSlide() {
    const newSlide = {
      name: 'New Tony!',
      image: 'http://placehold.it/350x150?text=New Tony!',
    };

    // Push onto the array (won't initially have any effect)
    this.slides.push(newSlide);

    // If you want to come back to the same slide after reinitializing...
    // (You could also use this index if you needed to inject the new slide
    // into the current location)

    // Save the current index:
    this.FlickityService.selectedIndex(this.sliderId).then((index) => {
      const currentIndex = index;

      // Set the initial index in the new options object
      const newOptions = {
        initialIndex: currentIndex,
      }

      // Merge the original options into our newOptions object
      angular.merge(newOptions, this.options);

      // Destroy the slider
      this.FlickityService.destroy(this.sliderId).then((result) => {
        // Immediately initialize the slider again using our new options
        this.FlickityService.create(this.element[0], this.sliderId, newOptions).then((result) => {
          console.log('Created again!: ', result);
        });
      });

    });

  };

}

angular.module('demo', ['bc.Flickity'])
  .controller('DemoController', DemoController);