let SideBar =  Vue.component('side-bar', {
  template: '#maisie-sidebar',
  delimiters: ['[[', ']]'],
  data() {
    return {
      sideBar: [
        {
          name: 'Dashboard',
          url: `/dashboard/{slug}/`,
          position: 'top',
          selected: false,
          opened: false,
          icon: `<i class="fas fa-home"></i>`,
          disableIfPaymentError: false
        },
        {
          name: 'Chatbots',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<i class="fas fa-robot"></i>`,
          disableIfPaymentError: false,
          children: [
            {
              name: 'Convo Flows',
              url: `/chat-bot/convo-flows/`,
              modernUrl: `/editor/convo/`
            },
            {
              name: 'Convo Modules',
              url: `/chat-bot/convo-modules/`,
              modernUrl: `/editor/modules/`
            },
            {
              name: 'Display Settings',
              url: `/chat-bot/convo-settings/`,
            },
          ]
        },
        {
          name: 'Live Chat',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<i class="fas fa-comments"></i>`,
          disableIfPaymentError: false,
          children: [
            {
              name: 'Inbox',
              url: `/live-chat/chat/`,
            },
            {
              name: 'Closed',
              url: `/live-chat/chat/?type=archived`,
            },
            {
              name: 'Blocked',
              url: `/live-chat/chat/?type=blocked`,
            },
            {
              name: 'Settings',
              url: `/live-chat/settings/`,
            },

          ]
        },
        {
          name: 'Knowledge Base',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<i class="fas fa-database"></i>`,
          disableIfPaymentError: false,
          children: [
            {
              name: 'FAQ',
              url: `/knowledge-base/faq`,
              modernUrl: `/knowledge-base/faq`
            },
            {
              name: 'Answered',
              url: `/knowledge-base/answered`,
              modernUrl: `/knowledge-base/answered`
            },
            {
              name: 'Unanswered',
              url: `/knowledge-base/unanswered`,
              modernUrl: `/knowledge-base/unanswered`
            }
          ]
        },
        {
          name: 'Subscribers',
          position: 'top',
          url: `/dashboard/messenger-marketing/subscribers-list/`,
          selected: false,
          opened: false,
          target: '',
          icon: `<i class="fas fa-user-friends"></i>`,
          disableIfPaymentError: false,
        },
        // {
        //   name: 'Campaigns',
        //   position: 'top',
        //   selected: false,
        //   opened: false,
        //   icon: `<i class="fas fa-bullhorn"></i>`,
        //   children: [
        //     {
        //       name: 'Messenger Broadcasts',
        //       url: `/dashboard/messenger-marketing/broadcast-message/`,
        //     },
        //   ]
        // },
        {
          name: 'Reporting',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<i class="fas fa-bar-chart"></i>`,
          disableIfPaymentError: false,
          children: [
            {
              name: 'Website chatbots\n',
              url: `/reports/web-site-bots/`,
              modernUrl: `/reporting/web-site-bots/`
            },
            {
              name: 'Social chatbots\n',
              url: `/reports/web-site-bots/`,
              modernUrl: `/reporting/convo-link-bots/`
            },
            {
              name: 'Email chatbots\n',
              url: `/reports/web-site-bots/`,
              modernUrl: `/reporting/convo-link-email-bots/`
            }
          ]
        },
        {
          name: 'Getting Started Guide',
          url: `https://www.maisieai.com/help/getting-started/?utm_source=dashboard&utm_medium=nav-link`,
          position: 'middle',
          selected: false,
          opened: false,
          icon: `<i class="far fa-play-circle"></i>`,
          disableIfPaymentError: false,
          target: '_blank',
        },
        {
          name: 'Help',
          url: `https://www.maisieai.com/help/?utm_source=dashboard&utm_medium=nav-link`,
          position: 'middle',
          selected: false,
          opened: false,
          icon: `<i class="far fa-life-ring"></i>`,
          disableIfPaymentError: false,
          target: '_blank',
        },
        {
          name: 'Integrations',
          url: `/dashboard/{slug}/settings/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<i class="fas fa-cogs"></i>`,
          disableIfPaymentError: false,
        },
        {
          name: 'Account',
          url: `/profile/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<i class="fas fa-user-alt"></i>`,
          disableIfPaymentError: false,
        },
          {
          name: 'Billing',
          url: `/payment/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<i class="far fa-credit-card"></i>`,
          disableIfPaymentError: false,
        },
        {
          name: 'Logout',
          url: `/logout/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<i class="fas fa-sign-out-alt"></i>`,
          disableIfPaymentError: false,
        },
      ],
      hoverColor: '#FE4A49',
      open: true,
      elementsForSecondLevel: [],
      expanded: false,
      defaultColor: '#FFFFFF',
      user: {},
      showSecondLevelBar: false,
      window: {},
      currentTabLC: false,
      activeSecondMenuName: '',
      activeBottomIndex: null,
      activeMiddleIndex: null,
      activeIndex: null,
      showBillingButton: showBillingButton,
      hasPaymentError: hasPaymentError,
      lcSecondBarClosed:false,
      needRefresh: false
    }
  },
  created() {
    maisieApi
      .get('/profile-api/')
      .then((resp) => {
        this.user = resp.data
        this.needRefresh = this.user.need_hard_refresh
        this.user.is_authenticated = true
        this.sideBar.forEach((row) => {
          if (row.url) {
            row.url = row.url.replace("{slug}", this.user.slug);
          }

          if (row.children) {
            row.children.forEach((child) => {
              child.url = child.url.replace("{slug}", this.user.slug);
            })
          }
        })

      })
      .catch((error) => {
        if (error.status === 403 && location.pathname !== '/login/') {
          location.pathname = '/login/'
        }
      })
      .finally(() => {
        this.findActiveMenuTab()
      })
  },
  watch: {
   showSecondLevelBar(){
     if (!this.showSecondLevelBar && this.currentTabLC){
       this.lcSecondBarClosed = true
     } else if(this.showSecondLevelBar && this.currentTabLC){
       let items = ''
        setTimeout(() => {
                 items = document.getElementById('second_bar_items');
              }, 1800);

     }
   }
   },
  mounted() {
    this.$nextTick(function () {
      window.addEventListener('resize', this.getWindowSize)
      this.getWindowSize()
    })
    this.findActiveMenuTab()
  },
  beforeDestroy() {
      window.removeEventListener('resize', this.getWindowSize);
  },
  methods: {
    findActiveMenuTab() {
      this.sideBar.forEach((row) => {
        row.selected = this.validateUrl(row.url)
        if ( row.children ) {
          row.children.forEach((child) => {
            if ('modernUrl' in child){
            child.selected = this.validateStartWithUrl(child.modernUrl)

            }else{
            child.selected = this.validateStartWithUrl(child.url)
            }
            if(child.selected){
              this.showSecondLevelBar = true
              this.addIconAndText(row.name)
              this.collapseMenu(row.name)
              this.elementsForSecondLevel = row.children
              if(row.name === 'Live Chat' && child.name !== 'Settings'){
                let items = document.getElementById('second_bar_items');
                items.style.marginTop = '60px'
                setTimeout(() => {
                 this.currentTabLC = true
              }, 1800);

              }
            }

            row.selected = child.selected ? true : row.selected
            row.opened = child.selected ? true : row.opened
          })
        } else {
          if (row.selected){
            this.addIconAndText(row.name)
          }

        }
      })
    },
    hardRefresh(){
      maisieApi
      .post('/profile-api/')
      location.reload(true);
    },
    closeRefresh(){
      this.needRefresh = false
    },
    topMenuItems() {
      return this.sideBar.filter(el => el.position === 'top')
    },
    bottomMenuItems() {
      if(showBillingButton){
         return this.sideBar.filter(el => el.position === 'bottom');
      }else {
        return this.sideBar.filter(el => el.position === 'bottom' &&  el.name !== 'Billing');
      }
    },
    middleMenuItems() {
      return this.sideBar.filter(el => el.position === 'middle')
    },
    toolTipToggle(index){
      this.activeIndex = index
    },
    bottomToolTipToggle(index){
      this.activeBottomIndex = index
    },
    middleToolTipToggle(index){
      this.activeMiddleIndex = index
    },
    hideMiddleToolTip(){
      this.activeMiddleIndex = null
    },
    hideBottomToolTip(){
      this.activeBottomIndex = null
    },
    hideToolTip(){
      this.activeIndex = null
    },
    validateUrl(url='') {
      let { forcePathForSideBar } = window
      let currentLocation = location.pathname
      return (url === currentLocation) || (url === forcePathForSideBar)
    },
    validateStartWithUrl(url='') {
      let { forcePathForSideBar } = window
      let currentLocation = location.pathname
      if (url.includes('live-chat')) {
        if (url.includes('archived') && window.location.href.includes('archived')) {
          return true
        } else if(url.includes('blocked') && window.location.href.includes('blocked')){
          return true
        } else if (!window.location.href.includes('blocked') && !window.location.href.includes('archived')){
           return (url === currentLocation) || (url === forcePathForSideBar)
        }
        return false
      }
      return currentLocation.startsWith(url) || (url === forcePathForSideBar)
    },
    getId(menuRow) {
      return menuRow.name.toLowerCase().split(' ').join('-')
    },
    addIconAndText(row){
      let name = document.querySelector("#topBar .current-tab .tab-name");
      let icon = document.querySelector("#topBar .current-tab .tab-icon i");
      if(row === 'Chatbots'){
        icon.className = 'fas fa-robot'
      } else if (row === 'Knowledge Base'){
        icon.className = 'fas fa-database'
      } else if (row === 'Live Chat'){
        icon.className = 'fas fa-comments'
      } else if (row === 'Reporting') {
        icon.className = 'fas fa-bar-chart'
      } else if(row === 'Dashboard'){
        icon.className = 'fas fa-home'
      } else if(row === 'Subscribers'){
        icon.className = 'fas fa-user-friends'
      } else if(row === 'Integrations'){
        icon.className = 'fas fa-cogs'
      } else if(row === 'Account'){
        icon.className = 'fas fa-user-alt'
      } else if(row === 'Billing'){
        icon.className = 'far fa-credit-card'
      }
      name.textContent = row
    },
    collapseMenu(type){
      let pageWrapper = document.getElementById('page_wrapper_id');

      if (!pageWrapper){
        pageWrapper = document.querySelector('.page-wrapper');
      }
      if (type === 'collapse'){
        this.lcSecondBarClosed = !this.lcSecondBarClosed
        this.showSecondLevelBar = !this.showSecondLevelBar
         if(this.showSecondLevelBar){
            pageWrapper.style.marginLeft = '272px'

        }else {
           pageWrapper.style.marginLeft = '60px'
         }
         this.activeSecondMenuName = type

      } else if(type === 'close'){
        this.showSecondLevelBar = false
        pageWrapper.style.marginLeft = '60px'
      }
      else {
        if(this.showSecondLevelBar){
          pageWrapper.style.marginLeft = '272px'
        }
         this.activeSecondMenuName = type
      }


    },
    menuClick(menuRow) {
      this.currentTabLC = false
      this.collapseMenu('close')

      if (menuRow.children && menuRow.children.length > 0) {
        window.location.href = menuRow.children[0].modernUrl || menuRow.children[0].url;
      }
      if (hasPaymentError && menuRow.disableIfPaymentError){
        return
      }
      this.elementsForSecondLevel = menuRow.children
      let expanded = false
      this.sideBar.forEach((row) => {
        row.opened = row.name === menuRow.name ? !row.opened : false
        if (row.opened) {
          expanded = true
        }
      })
      this.expanded = expanded
    },
    toggleMenu() {
      this.open = !this.open
    },
    toggleTabletExpand() {
      this.expanded = false
      this.toggleMenuRowState()
    },
    getWindowSize(event) {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;

      if (width > 0 && width <= 768) {
        this.open = false
      } else if (width >= 768) {
        this.open = true
      }

      this.window = { width, height }
    },
    toggleMenuRowState() {
        this.sideBar.forEach((row) => row.opened = false)
    }

  }
})