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: `<span class="material-symbols-outlined">home</span>`,
          disableIfPaymentError: false
        },
        {
          name: 'Customer Info',
          position: 'top',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">group</span>`,
          disableIfPaymentError: false,
          children: [
              {
                name: 'Businesses',
                url: `/customer-info/businesses`,
                modernUrl: `/customer-info/businesses`
              },
              {
                name: 'Contacts',
                url: `/customer-info/contacts`,
                modernUrl: `/customer-info/contacts`
              },
              {
                name: 'Lenders',
                url: `/customer-info/lenders`,
                modernUrl: `/customer-info/lenders`
              },
            ]
        },
          {
          name: 'Deal Pipeline',
          position: 'top',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">paid</span>`,
          disableIfPaymentError: false,
            children: [
                /*
                We need to add this stages to the system
Lead
 2. Opportunity
 3. Application In progress
 4. Application submitted
 5. Loan in underwriting
 6. Loan approved / Settlement
 7. Loan declined
 8. Billing
                 */
              {
                name: 'Lead',
                url: `/deal-pipeline/lead`,
                modernUrl: `/deal-pipeline/lead/`
              },
              {
                name: 'Opportunity',
                url: `/deal-pipeline/opportunity`,
                modernUrl: `/deal-pipeline/opportunity/`
              },
              {
                name: 'Application In Progress',
                url: `/deal-pipeline/application-in-progress`,
                modernUrl: `/deal-pipeline/application-in-progress/`
              },
              {
                name: 'Application Submitted',
                url: `/deal-pipeline/application-submitted`,
                modernUrl: `/deal-pipeline/application-submitted/`
              },
              {
                name: 'Loan in Underwriting',
                url: `/deal-pipeline/loan-in-underwriting`,
                modernUrl: `/deal-pipeline/loan-in-underwriting/`
              },
              {
                name: 'Loan Approved / Settlement',
                url: `/deal-pipeline/loan-approved-settlement`,
                modernUrl: `/deal-pipeline/loan-approved-settlement/`
              },
              {
                name: 'Loan Declined',
                url: `/deal-pipeline/loan-declined`,
                modernUrl: `/deal-pipeline/loan-declined/`
              },
              {
                name: 'Billing',
                url: `/deal-pipeline/billing`,
                modernUrl: `/deal-pipeline/billing/`
              }
            ]
        },
        {
          name: 'Live Chat',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<span class="material-symbols-outlined">3p</span>`,
          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: `<span class="material-symbols-outlined">school</span>`,
          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: 'Chatbots',
          position: 'top',
          selected: false,
          opened: false,
          icon: `<span class="material-symbols-outlined">assistant_navigation</span>`,
          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/`,
              modernUrl: `/editor/chatbot-settings-page/`
            },
            {
              name: 'Agents',
              url: `/editor/agents/`,
            },
            {
              name: 'Landing Page Settings',
              url: `/editor/landing-page/`,
              modernUrl: `/editor/landing-page/`
            },
          ]
        },
        // {
        //   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: `<span class="material-symbols-outlined">bar_chart</span>`,
          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: 'Integrations',
          url: `/dashboard/{slug}/settings/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">hub</span>`,
          disableIfPaymentError: false,
        },
        {
          name: 'Account',
          url: `/profile/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">settings</span>`,
          disableIfPaymentError: false,
        },
          {
          name: 'Billing',
          url: `/payment/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">credit_card</span>`,
          disableIfPaymentError: false,
        },
        {
          name: 'Logout',
          url: `/logout/`,
          position: 'bottom',
          selected: false,
          opened: false,
          target: '',
          icon: `<span class="material-symbols-outlined">logout</span>`,
          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);

     }
     let pageWrapper = document.getElementById('page_wrapper_id');
     if(this.showSecondLevelBar){
       pageWrapper.style.marginLeft = '272px'
       this.findActiveMenuTab()
     }
   }
   },
  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 span");
      if(row === 'Chatbots'){
        icon.textContent = 'assistant_navigation'
      } else if (row === 'Knowledge Base'){
        icon.textContent = 'school'
      } else if (row === 'Live Chat'){
        icon.textContent = '3p'
      } else if (row === 'Reporting') {
        icon.textContent = 'bar_chart'
      } else if(row === 'Dashboard'){
        icon.textContent = 'home'
      } else if(row === 'Subscribers'){
        icon.textContent = 'fas fa-user-friends'
      } else if(row === 'Integrations'){
        icon.textContent = 'hub'
      } else if(row === 'Account'){
        icon.textContent = 'settings'
      } else if(row === 'Billing'){
        icon.textContent = 'credit_card'
      } else if(row === 'Deal Pipeline'){
        icon.textContent = 'paid'
      } else if(row === 'Customer Info'){
        icon.textContent = 'group'
      }
      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)
    }

  }
})