define([
  'core/js/adapt',
  'core/js/views/componentView',
  './modeEnum'
], function(Adapt, ComponentView, MODE) {
  'use strict';

  var NarrativeView = ComponentView.extend({

    _isInitial: true,
    _isvisited:[0,0,0,0,0],

    events: {
      'click .js-narrative-strapline-open-popup': 'openPopup',
      'click .js-narrative-controls-click': 'onNavigationClicked',
      'click .js-narrative-progress-click': 'onProgressClicked',
    },

    preRender: function() {      
      this.listenTo(Adapt, {
        'device:changed device:resize': this.reRender,
        'notify:closed': this.closeNotify
      });
      this.renderMode();

      this.listenTo(this.model.get('_children'), {        
        'change:_isActive': this.onItemsActiveChange,
        'change:_isVisited': this.onItemsVisitedChange
      });

      $(".feedback-container").hide();
      this.checkIfResetOnRevisit();
      this.calculateWidths();
    },

    onItemsActiveChange: function(item, _isActive) {
      if (_isActive === true) {
        this.setStage(item);
      }
    },

    onItemsVisitedChange: function(item, isVisited) {
      
      if (!isVisited) return;
      this.$('[data-index="' + item.get('_index') + '"]').addClass('is-visited');
    },

    calculateMode: function() {
      var mode = Adapt.device.screenSize === 'large' ?
          MODE.LARGE :
          MODE.LARGE;
      this.model.set('_mode', mode);
    },

    renderMode: function() {
      this.calculateMode();
      if (this.isLargeMode()) {
        this.$el.addClass('mode-large').removeClass('mode-small');
      } else {
        this.$el.addClass('mode-small').removeClass('mode-large');
      }
    },

    isLargeMode: function() {
      return this.model.get('_mode') === MODE.LARGE;
    },

    postRender: function() {
      this.renderMode();
      this.setupNarrative();

      this.$('.narrative__slider').imageready(this.setReadyStatus.bind(this));

      if (Adapt.config.get('_disableAnimation')) {
        this.$el.addClass('disable-animation');
      }
    },

    checkIfResetOnRevisit: function() {
      var isResetOnRevisit = this.model.get('_isResetOnRevisit');
      // If reset is enabled set defaults
      if (isResetOnRevisit) {
        this.model.reset(isResetOnRevisit);
      }
    },

    setupNarrative: function() {
      
      this.renderMode();
      var items = this.model.get('_children');
      if (!items || !items.length) return;

      var activeItem = this.model.getActiveItem();
      if (!activeItem) {
        activeItem = this.model.getItem(0);
        activeItem.toggleActive(true);
      } else {
        // manually trigger change as it is not fired on reentry
        items.trigger('change:_isActive', activeItem, true);
      }

      this.calculateWidths();

      if (!this.isLargeMode() && !this.model.get('_wasHotgraphic')) {
        this.replaceInstructions();
      }
      this.setupEventListeners();
      this._isInitial = false;
    },

    calculateWidths: function() {
      var itemCount = this.model.get('_children').length;
      this.model.set({
        '_totalWidth': 100 * itemCount,
        '_itemWidth': 100 / itemCount
      });
    },

    resizeControl: function() {
      
      var previousMode = this.model.get('_mode');
      this.renderMode();
      if (previousMode !== this.model.get('_mode')) this.replaceInstructions();
      this.evaluateNavigation();
      var activeItem = this.model.getActiveItem();
      if (activeItem) this.setStage(activeItem);
    },

    reRender: function() {
      if (this.model.get('_wasHotgraphic') && this.isLargeMode()) {
        this.replaceWithHotgraphic();
      } else {      
        this.resizeControl();
      }
    },

    closeNotify: function() {      
      this.evaluateCompletion();
      
    },

    replaceInstructions: function() {
      if (this.isLargeMode()) {
        this.$('.narrative__instruction-inner').html(this.model.get('instruction'));
      } else if (this.model.get('mobileInstruction') && !this.model.get('_wasHotgraphic')) {
        this.$('.narrative__instruction-inner').html(this.model.get('mobileInstruction'));
      }
    },

    replaceWithHotgraphic: function() {
      if (!Adapt.componentStore.hotgraphic) throw "Hotgraphic not included in build";
      var HotgraphicView = Adapt.componentStore.hotgraphic.view;

      var model = this.prepareHotgraphicModel();
      var newHotgraphic = new HotgraphicView({ model: model });
      var $container = $(".component__container", $("." + this.model.get("_parentId")));

      $container.append(newHotgraphic.$el);
      this.remove();
      $.a11y_update();
      _.defer(function() {
        Adapt.trigger('device:resize');
      });
    },

    prepareHotgraphicModel: function() {
      var model = this.model;
      model.resetActiveItems();
      model.set({
        '_isPopupOpen': false,
        '_component': 'hotgraphic',
        'body': model.get('originalBody'),
        'instruction': model.get('originalInstruction')
      });

      return model;
    },

    moveSliderToIndex: function(itemIndex) {
      var offset = this.model.get('_itemWidth') * itemIndex;
      if (Adapt.config.get('_defaultDirection') === 'ltr') {
        offset *= -1;
      }
      var cssValue = 'translateX('+offset+'%)';
      var $sliderElm = this.$('.narrative__slider');
      var $straplineHeaderElm = this.$('.narrative__strapline-header-inner');

      //$sliderElm.css('transform', cssValue);
      $straplineHeaderElm.css('transform', cssValue);

      if (Adapt.config.get('_disableAnimation') || this._isInitial) {
        this.onTransitionEnd();
      } else {
        $sliderElm.one('transitionend', this.onTransitionEnd.bind(this));
      }
    },

    onTransitionEnd: function() {
      if (this._isInitial) return;

      var index = this.model.getActiveItem().get('_index');
      if (this.isLargeMode()) {
        this.$('.narrative__content-item[data-index="'+index+'"]').a11y_focus();
      } else {
        this.$('.narrative__strapline-btn').a11y_focus();
      }
    },

    setStage: function(item) {
      
      var index = item.get('_index');
      if (this.isLargeMode()) {
        // Set the visited attribute for large screen devices
        item.toggleVisited(true);     }

     
      // if(index==2){
      //   $(".narrative__slide-container").hide();
      //   $(".narrative__content").addClass("full_layout")
      // }
      // else{
      //   $(".narrative__slide-container").show();
      //   $(".narrative__content").removeClass("full_layout")
      // }

      var $slideGraphics = this.$('.narrative__slider-image-container');     
      $slideGraphics.removeClass("is-selected").eq(index).addClass("is-selected");      
      this.$('.narrative__progress:visible').removeClass('is-selected').filter('[data-index="'+index+'"]').addClass('is-selected');
      $slideGraphics.children('.controls').a11y_cntrl_enabled(false);
      $slideGraphics.filter('[data-index="'+index+'"]').children('.controls').a11y_cntrl_enabled(true);
      this.$('.narrative__slider-image-container').addClass('u-display-none').a11y_on(false).filter('[data-index="'+index+'"]').removeClass('u-display-none').a11y_on(true); 
      this.$('.narrative__content-item').removeClass("is-selected").eq(index).addClass("is-selected")
      this.$('.narrative__content-item').addClass('u-visibility-hidden u-display-none').a11y_on(false).filter('[data-index="'+index+'"]').removeClass('u-visibility-hidden u-display-none').a11y_on(true); 
 
      this.$('.narrative__strapline-btn').a11y_cntrl_enabled(false).filter('[data-index="'+index+'"]').a11y_cntrl_enabled(true);
 
      if(this.$('.narrative__content-item.is-selected').hasClass("mcqcomplete")){
        $slideGraphics.eq(index).find(".showAnswer").show()
        $slideGraphics.eq(index).find('.submitBtn').addClass("disabled");        
        $slideGraphics.eq(index).find(".cyu-option").addClass("disabledoption");
        this.$('.narrative__controls-right').removeClass('nextDisabled')
        if( $slideGraphics.eq(index).find(".cyu-option.correctAns").length>0){
          $slideGraphics.eq(index).find(".cyu-option.correctAns").addClass("abc");
          this.$('.narrative__content-item.is-selected').find(".correct").show();
          this.$('.narrative__content-item.is-selected').find(".incorrect").hide();
        }
        if($slideGraphics.eq(index).find(".cyu-option.incorrectAns").length>0){
          $slideGraphics.eq(index).find(".cyu-option.incorrectAns").addClass("abc");
          this.$('.narrative__content-item.is-selected').find(".correct").hide();
          this.$('.narrative__content-item.is-selected').find(".incorrect").show();
        }
       }else{
        
        if(this.model.attributes._typeofActivity_carosel_img_text=="true"){
          this.$('.narrative__controls-right').removeClass('nextDisabled')
        }else{
          //this.$('.narrative__controls-right').addClass('nextDisabled')
        }
        this.$('.narrative__content-item.is-selected').find('.correct, .incorrect').hide();
        $slideGraphics.eq(index).find('.submitBtn').addClass("disabled");
        $slideGraphics.eq(index).find(".cyu-option").removeClass("selected");
        $slideGraphics.eq(index).find(".showAnswer").hide();
        // $(".narrative__content-item").find(".closeBtn_CYU").hide();
       
       }




       
      this.evaluateNavigation();
      //this.evaluateCompletion(); 
      //this.moveSliderToIndex(index);
    },

    evaluateNavigation: function() { 
     

      var active = this.model.getActiveItem();
      if (!active) return;

      var currentStage = active.get('_index');
      var itemCount = this.model.get('_children').length;

      var isAtStart = currentStage === 0;
      var isAtEnd = currentStage === itemCount - 1;

      this.$('.narrative__controls-left').toggleClass('u-visibility-hidden', isAtStart);
      this.$('.narrative__controls-right').toggleClass('u-visibility-hidden', isAtEnd);
      if(isAtEnd==true){
        
 //if(this.$el.find(".main-container").find(".mcqcomplete").length!= this.$el.find(".main-container").find(".narrative__content-item").length){
          //this.$el.closest(".block").find(".trickle-button").find(".trickle-button__inner").hide();
          if(this.$el.find(".main-container").find(".mcqcomplete").length==this.$el.find(".main-container").find(".narrative__content-item").length){
            this.$el.closest(".block").find(".trickle-button").find(".trickle-button__inner").show();
          }
          
          if(this.model.attributes._typeofActivity_carosel_img_text=="true"){
            this.$el.closest(".block").find(".trickle-button").find(".trickle-button__inner").show();
          }
  // }
      }
   
    },

    evaluateCompletion: function() {      
      if(this.model.areAllItemsCompleted()) {
        this.trigger('allItems');
      }
    },

    openPopup: function(event) {
      event && event.preventDefault();
      var currentItem = this.model.getActiveItem();
      Adapt.trigger('notify:popup', {
        title: currentItem.get('title'),
        body: currentItem.get('body')
      });

      Adapt.on('popup:opened', function() {
        // Set the visited attribute for small and medium screen devices
        currentItem.toggleVisited(true);
      });
    },
    showAnswerPopup: function(e){
    
      $(".narrative__content-item").find(".feedback-container").show()
      $(".narrative__content-item").find(".correct, .incorrect").hide();
      //$(".narrative__content-item").find(".closeBtn_CYU").show();
      $(e.currentTarget).closest(".main-container").find(".narrative__content-item.is-selected").find(".correct").show();
      $(e.currentTarget).closest(".narrative__slider-image-container.is-selected").find(".cyu-option.selected").addClass("correctAns");
    },
    onNavigationClicked: function(event) {
      var stage = this.model.getActiveItem().get('_index');
       var $that= this;
      $(".narrative__content-item").find(".feedback-container").hide();
      if ($(event.currentTarget).hasClass('narrative__controls-right')) {
        this.model.setActiveItem(++stage);        
        
        $that.$el.find(".main-container").find(".narrative__slider-image-container.is-selected").find("img").attr("tabindex", "0");
        setTimeout(function(){
        $that.$el.find(".main-container").find(".narrative__slider-image-container.is-selected").find("img").focus();
        }, 50)
      } else if ($(event.currentTarget).hasClass('narrative__controls-left')) {
        this.model.setActiveItem(--stage);   

        $that.$el.find(".main-container").find(".narrative__slider-image-container.is-selected").find("img").attr("tabindex", "0");
          setTimeout(function(){
          $that.$el.find(".main-container").find(".narrative__slider-image-container.is-selected").find("img").focus();
          }, 50)
      }    
    },

    onProgressClicked: function(event) {         
         
      event && event.preventDefault();
      var clickedIndex = $(event.target).data('index');
      this.model.setActiveItem(clickedIndex);
    },

    setupEventListeners: function() {      
      if (this.model.get('_setCompletionOn') === 'inview') {
        this.setupInviewCompletion('.component__widget');
      }
    },

    closeCYUpopUp: function(e){       
      $(e.currentTarget).closest(".main-container").find(".feedback-container").hide()
      $(e.currentTarget).closest(".main-container").find(".showAnswer").show();
    }
  });

  return NarrativeView;

});
