<template>
  <b-modal :id="modalID" :ref="modalRef" size="lg" hide-footer @hidden="onCancel()" :centered="modalID === 'add-widget-modal'">
    <div class="row">
      <div class="header">
        <h3>{{header}}</h3>
      </div>
    </div>
    <div class="row modal-height">
      <div class="left-panel col col-3">
        <ul class="sections">
          <template v-for="section in modalSections">
            <li
              v-if="!section.hidden"
              :key="section.index" @click="selectSection(section)"
              class="item"
              :class="{'active': section.index === selectedSectionIndex, 'visible': canSelectSection(section.index), 'selection': section.index === selectedSectionIndex && editMode, 'error': section.isError}">
                <span class="progress-bar-circle" :class="{'active': selectedSectionIndex >= section.index || editMode, 'focus': section.index === selectedSectionIndex && editMode}">
                  <svg class="icon" :style="{ 'display': selectedSectionIndex >= section.index || editMode ? 'block' : 'none'  }">
                    <use v-if="section.index === selectedSectionIndex && editMode" xlink:href="/assets/img/mads-common-icons.svg#edit-pencil"></use>
                    <use v-else xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </span>
                <span :class="{'focussed-text': section.index === selectedSectionIndex && editMode}" v-html="section.name" class="checkbox-div"></span>
            </li>
          </template>
        </ul>
      </div>
      <div class="right-panel col col-9">
        <div class="panel-div">
          <div class="panel-sub-div">
            <slot name="right-panel"></slot>
          </div>
        </div>
      </div>
      <div class="mads-footer" v-if="!selectedSection.hideFooter">
        <b-button variant="outline-primary" @click="onCancel()" class="cancel-btn">Cancel</b-button>
        <b-button variant="primary" :disabled="disabledButton" @click="nextSection()" v-if="!editMode && selectedSectionIndex < modalSections.length" class="next-btn">Next</b-button>
        <b-button variant="primary" :disabled="disabledButton" @click="onSave()" v-if="(editMode || selectedSectionIndex === modalSections.length)" class="save-btn">Save</b-button>
      </div>
    </div>
  </b-modal>
</template>

<script>
// import EntityManagerBus from '../entityManager/entityManagerBus'
// import SharedBus from './sharedBus'

export default {
  props: {
    modalID: {
      type: String,
      required: true
    },
    modalRef: {
      type: String,
      required: true
    },
    modalSections: {
      type: Array,
      required: true
    },
    selectedSection: {
      type: Object,
      default: () => {
        return {}
      }
    },
    selectedSectionIndex: {
      type: Number,
      required: true
    },
    editMode: {
      type: Boolean,
      default: false
    },
    isHide: {
      type: Boolean,
      default: true
    },
    header: {
      type: String,
      default: ' '
    },
    disabledButton: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visitedSections: {},
      progressSectionIndex: 1
    }
  },
  methods: {
    canSelectSection (sectionIndex) {
      return this.editMode || this.visitedSections[sectionIndex]
    },
    selectSection (section) {
      if (this.canSelectSection(section.index)) {
        this.$emit('select-section', section.index)
      }
    },
    nextSection () {
      this.$emit('next-section')
    },
    onCancel () {
      this.visitedSections = {}
      this.visitedSections[1] = true
      this.progressSectionIndex = 1
      this.$emit('on-cancel')
      this.$refs[this.modalRef].hide()
    },
    hide () {
      this.$refs[this.modalRef].hide()
    },
    onSave () {
      this.$emit('on-save')
      if (this.isHide) {
        this.$refs[this.modalRef].hide()
      }
      this.progressSectionIndex = 1
    },
    calculateBarHeight (sections) {
      let heightLength = sections ? sections.length - 1 : 0
      return Number(heightLength) * 100
    },
    calculateActiveBarHeight (index) {
      let mainIndex
      if (this.progressSectionIndex <= index) {
        this.progressSectionIndex = index
        mainIndex = index
      } else {
        mainIndex = this.progressSectionIndex
      }
      return (Number(mainIndex) - 1) * 100
    }
  },
  watch: {
    selectedSectionIndex (index) {
      this.visitedSections[index] = true
    }
  },
  mounted () {
    this.visitedSections[this.selectedSectionIndex] = true

    // EntityManagerBus.$on('open-mads-modal', (modalRef) => {
    //   this.$refs[modalRef] && this.$refs[modalRef].show()
    // })

    // SharedBus.$on('open-mads-modal', (modalRef) => {
    //   this.$refs[modalRef] && this.$refs[modalRef].show()
    // })
  },
  beforeDestroy () {
    // EntityManagerBus.$off()
    // SharedBus.$off()
  }
}
</script>

<style lang="scss" scoped>
  .row {
    margin: 0;
  }
  .row {
    .header {
      padding: 20px;
      background: #1a4d75;
      width: 100%;
      color: white;
      border-radius: 4px 4px 0px 0px;
      h3 {
        margin-bottom: 0;
        font-size: 20px;
        color: white;
      }
    }
  }
  .panel-div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .panel-sub-div {
    width: 95%;
    border-radius: 5px;
    background: white;
  }
  .modal-height {
    min-height: 400px;
  }
  .left-panel {
    padding: 20px;
    border-right: 1px solid #f3f3f3;
    display: flex;
    align-items: center;
    .focussed-text{
      color:#27AAE1;
    }
    .sections {
      padding-left: 26px;
      margin-bottom: 0;
      position: relative;
      z-index: 5;
      li.item {
        list-style: none;
        font-size: 18px;
        height: 75px;
        display: flex;
        align-items: center;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 20px;
        color: #4d5156;
        &:first-child {
          .progress-bar-circle{
            &::before {
              display: none;
            }
          }
        }
        &:last-child {
          .progress-bar-circle{
            &::after {
              display: none;
            }
          }
        }
        .progress-bar-circle{
          position: relative;
          width: 25px;
          height: 25px;
          background: #C4C4C4;
          border-radius: 50%;
          margin-right: 10px;
          &.active{
            background: #3576AB;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon{
              height: 14px;
              width: 15px;
              cursor: pointer;
            }
            &::after {
              border-right: 3px solid #3576AB;
            }
            &::before {
              border-right: 3px solid #3576AB;
            }
          }
          &.focus{
            min-width: 35px;
            min-height: 35px;
            margin-left: -5px;
            .icon{
              height: 14px;
              fill: white;
            }
          }
          &::after {
            content: "";
            border-right: 3px solid #C4C4C4;
            top: 50%;
            position: absolute;
            height: 47.5px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
          }
          &::before {
            content: "";
            border-right: 3px solid #C4C4C4;
            bottom: 50%;
            position: absolute;
            height: 47.5px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
          }
        }
        &.active {
          font-weight: 700;
          color: black;
        }
        &.visible {
          cursor: pointer;
        }
        &.error {
          font-weight: 700;
          color: red;
          span {
            color: red;
          }
        }
      }
      li.item.active{
        .progress-bar-circle{
          &::after {
            border-right: 3px solid #C4C4C4;
          }
        }
      }
      li.item.active.visible.selection{
        .progress-bar-circle{
          &::after {
            border-right: 3px solid #3576AB;
          }
        }
      }
    }
  }
  .right-panel {
    padding: 20px 0px 20px 0px;
    background: #f9f9fb;
    border-radius: 0px 0px 6px 0px;
  }
  .mads-footer {
    position: absolute;
    text-align: left;
    background: #f9f9fb;
    right: 30px;
    bottom: 30px;
    .next-btn, .save-btn {
      color: #ffffff !important;
      background: #2469a0 !important;
      border-radius: 3px;
      width: 120px;
      height: 39px;
      font-size: 14px;
      line-height: 17px;
      border: 0px !important;
    }
    .cancel-btn{
      border: none !important;
      background: #f9f9fb !important;
      color: #929294 !important;
      border-radius: 3px;
      width: 120px;
      height: 39px;
      font-size: 14px;
      line-height: 17px;
      margin-right: 8px;
    }
    padding: 0;
  }
  .checkbox-div{
    width: 95px;
  }
</style>

<style lang="scss">
  .modal {
    .modal-content {
      border-radius: 6px;
      .close {
        color: white;
        opacity: 1;
        margin-top: -10px;
      }
      .modal-body {
        padding: 0;
        flex-direction: column;
        .form-group {
          margin-bottom: 18px;
        }
      }
    }
  }
</style>

<style lang="scss">
  .multiselect_single{
      text-transform: capitalize !important;
  }
</style>
