<template>
  <div class="container">
    <h1>
      Hood and Fan Assistant
      <span v-if="user_route === 'hood_and_fan'">— Complete System</span>
      <span v-if="user_route === 'fan_only'">— Fan Only</span>
    </h1>
    <div class="builder">
      <div class="image">
        <img :src="getImgUrl(current_step.image)">
      </div>
      <div class="content-outer">
        <Pagination :current_step="current_step" :user_answers="user_answers" :json="json"/>
        <BuilderQuestionsInit v-if="current_step.id == '10'" :current_step="current_step"/>
        <BuilderQuestionsPathChoice v-else-if="current_step.id == '20-A' || current_step.id == '20-B'" :current_step="current_step"/>
        <Results v-else-if="current_step.type == 'results'" :current_step="current_step" :user_answers="user_answers"/>
        <BuilderQuestionsGeneral v-else :current_step="current_step" :user_answers="user_answers"/>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '../main.js';
import BuilderQuestionsInit from './partials/_BuilderQuestionsInit.vue';
import BuilderQuestionsPathChoice from './partials/_BuilderQuestionsPathChoice.vue';
import BuilderQuestionsGeneral from './partials/_BuilderQuestionsGeneral.vue';
import Pagination from './partials/_Pagination.vue';
import Results from './partials/_Results.vue';

export default {
  name: 'Builder',
  components: {
    BuilderQuestionsInit,
    BuilderQuestionsPathChoice,
    BuilderQuestionsGeneral,
    Pagination,
    Results
  },
  props: {
    json: Object
  },
  data: () => ({
    current_step: '',
    user_answers: Array(),
    user_route: '',
  }),
  created() {
    this.current_step = this.json['10']; // Set to initial question

    EventBus.$on('advanceStepper', function(val) {
      // double check that the value isn't empty
      if(val['selected_val'] != '') {
        // need to check that user data doesn't already exist, and overwrite if it does
        let overwrite = false;
        for( var i = 0, len = this.user_answers.length; i < len; i++ ) {
          if( this.user_answers[i]['question_id'] === this.current_step.id ) {
            // data already exists for this question, need to overwrite
            overwrite = true;
            this.user_answers[i] = val;
            break;
          }
        }
        // no overwrite value present, record initial user data
        if(!overwrite) {
          this.user_answers.push(val);
        }

        // time to go to the next slide
        // check for route before scoping into answer routes
        if(this.current_step.route != undefined) {
          // check for conditional routing within route
          if(this.current_step.route.type === 'conditional') {
            if(this.current_step.route.format === 'number') {
              if(val['selected_val'] >= this.current_step.route.value) {
                // selected value is greater than threshold for default route
                this.current_step = this.json[this.current_step.route.conditional];
              } else {
                // selected value is within the default scope
                this.current_step = this.json[this.current_step.route.default];
              }
            } else if(this.current_step.route.format === 'string') {
              // Checking object for value
              if(Object.values(val['selected_val']).indexOf(this.current_step.route.value) > -1 || Object.values(val['selected_val']).indexOf('Unsure') > -1) {
                // selected value triggers conditional
                this.current_step = this.json[this.current_step.route.conditional];
              } else {
                // selected value is ok
                this.current_step = this.json[this.current_step.route.default]
              }
            } else if(this.current_step.route.format === 'checkbox') {
              // Checking object for value using Array.some
              let route_value = this.current_step.route.value;
              if(val['selected_val'][route_value] === true) {
                // selected value is both present & set to true
                this.current_step = this.json[this.current_step.route.conditional];
              } else {
                // selected value is ok
                this.current_step = this.json[this.current_step.route.default]
              }
            }
          } else if(this.current_step.id === '80-B-2' && val['selected_val'][0] === '3 Phase') {
            // special conditional logic for question 80-B-2, need to check question 30-B-2
            if(this.user_answers[2]['selected_val'] >= 3 && this.user_answers[2]['selected_val'] <= 7) {
              // break to special contact page
              this.current_step = this.json['80-B-3'];
            } else {
              // all good
              // advance to next slide using the route defined by the current slide
              this.current_step = this.json[this.current_step.route];
            }
          } else {
            // advance to next slide using the route defined by the current slide
            this.current_step = this.json[this.current_step.route];
          }
        } else {
          let property = val['selected_val'];
          // advance to next slide using the route defined by answer selection
          this.current_step = this.json[this.current_step.answers[property].route];
        }
      }
    }.bind(this));

    EventBus.$on('slideChange', function(slide) {
      let selected;
      this.current_step = this.json[slide];
      // loop through answers, fetch previous data and set!
      for( var i = 0, len = this.user_answers.length; i < len; i++ ) {
        if( this.user_answers[i]['question_id'] === slide ) {
          selected = this.user_answers[i]['selected_val'];
        }
      }
      // simulate Promise here, don't let event fire before slideChange has been executed
      setTimeout(() => {
        EventBus.$emit('paginationSetSelected', selected);
      }, 300);
    }.bind(this));

    EventBus.$on('reset', function() {
      this.current_step = this.json['10'];
      this.user_answers = [];
      EventBus.$emit('setUserRoute', null);
    }.bind(this));

    EventBus.$on('setUserRoute', function(route_name) {
      this.user_route = route_name;
    }.bind(this));
  },
  methods: {
    getImgUrl(image) {
      return require('../assets/images/' + image);
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../assets/scss/_variables.scss';

  h1 {
    margin-top: 0;
    margin-bottom: 20px;

  }

  .container {
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
  }

  .builder {
    background-color: $white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    //position: relative;
    @include shadow;

    @media screen and (min-width: $screen-md) {
      height: 600px;
      flex-direction: row;
    }
  }

  .image,
  .content-outer {
    width: 100%;
    flex-grow: 0;
    display: flex;
    flex-direction: column;

    @media screen and (min-width: $screen-md) {
      width: 50%;
    }
  }

  .content-outer {
    padding: 20px;
    overflow: scroll;

    @media screen and (min-width: $screen-md) {
      padding: 40px;
    }
  }

  .image {
    background-color: $purple-light-4;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    height: 300px;

    @media screen and (min-width: 370px) {
      height: 320px;
    }

    @media screen and (min-width: 400px) {
      height: 340px;
    }

    @media screen and (min-width: 460px) {
      height: 400px;
    }

    @media screen and (min-width: 500px) {
      height: 450px;
    }

    @media screen and (min-width: 600px) {
      height: 500px;
    }

    @media screen and (min-width: 650px) {
      height: 550px;
    }

    @media screen and (min-width: 700px) {
      height: 625px;
    }

    @media screen and (min-width: $screen-md) {
      border-radius: 8px 0 0 8px;
      height: auto;
    }

    img {
      height: auto;
      width: 100%;

      @media screen and (min-width: $screen-md) {
        margin-bottom: 0;
      }

      @media screen and (min-width: $screen-lg) {
        position: relative;
        top: 75px;
      }
    }
  }
</style>