/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable prefer-rest-params */

import { defineComponent, PropType, ref, onMounted, onBeforeUnmount } from 'vue'
import { Launcher } from './Launcher'
import { AccountDropdown } from './AccountDropdown'
//import { Burger } from './Burger'
import { User } from '@/types'
// import './NavBar.scss'

interface NavLink {
  title: string;
}

type NavLinks = Array<NavLink>

export const NavBar = defineComponent({
  name: 'NavBar',
  props: {
    icon: String,
    appName: String,
    navLinks: {
      type: Array as PropType<NavLinks>
    },
    activeTab: String,
    user: {
      type: Object as PropType<User>,
      required: true,
    },
    darkMode: Boolean,
  },
  setup: (props, { emit }) => {
    //intercom
    (window as any).intercomSettings = {
      app_id: "nkfiu1bw",
      name: props.user.displayName,
      email: props.user.email,
      user_id: props.user.id,
      user_hash: props.user.intercomUserHash,
      created_at: new Date(), // Signup date as a Unix timestamp
      custom_launcher_selector: '.help-icon',
      hide_default_launcher: true,
    };
    
    (function () { 
      const w = window as any; 
      const ic = w.Intercom; 
      if (typeof ic === "function") { 
        ic('reattach_activator'); 
        ic('update', w.intercomSettings); 
      } else { 
        const d = document; 
        const i: any = () => { i.c(arguments); }; 
        i.q = []; 
        i.c = function (args: any) { i.q.push(args); }; 
        w.Intercom = i; 
        const l = function () { 
          const s = d.createElement('script'); 
          s.type = 'text/javascript'; 
          s.async = true; 
          s.src = 'https://widget.intercom.io/widget/nkfiu1bw'; 
          const x = d.getElementsByTagName('script')[0]; x.parentNode?.insertBefore(s, x); 
        }; 
        if (w.attachEvent) { w.attachEvent('onload', l); } 
        else { w.addEventListener('load', l, false); } 
      } 
    })()

    const burgerOpen = ref(false)
    const launcherOpen = ref(false)
    const accountOpen = ref(false)

    const windowWidth = ref(window.innerWidth)
    const mobile = ref(windowWidth.value <= 767 ? true : false)

    window.onresize = () => {
      windowWidth.value = window.innerWidth
      window.innerWidth <= 767 ? mobile.value = true : mobile.value = false
    }

    const toggleOpen = (menuName: string): void => {
      burgerOpen.value = menuName === 'burger' ? !burgerOpen.value : false
      launcherOpen.value = menuName === 'launcher' ? !launcherOpen.value : false
      accountOpen.value = menuName === 'account' ? !accountOpen.value : false
    }

    const handleClickOutside = (e: any) => {
      // this prevents TypeScript error
      const target = e.target as Element

      const menuClasses = ['application-launcher-icon', 'account-dropdown-icon', 'burger-menu', 'burger-menu-item']

      // checks if the clicked classname matches a menu classname
      const menuClick = menuClasses.some(menu => target.className.includes(menu))

      //closes all menus if a menu wasn't clicked
      if (!menuClick) toggleOpen('')
    }

    onBeforeUnmount(() => document.removeEventListener('click', handleClickOutside))

    onMounted(() => document.addEventListener('click', handleClickOutside))

    const renderTabs = (): JSX.Element|undefined => {
      if (props.navLinks) return props.navLinks?.map((link: NavLink): JSX.Element => (
        <div
          key={link.title}
          class={`nav-link ${props.activeTab === link.title ? 'active' : ''}`}
          onClick={() => {
            emit('tabClick', link.title)
            if (mobile.value) burgerOpen.value = false
          }}
        >
          {link.title}
        </div>
      ))

      return undefined;
    }

    return () => (
      <div id="tgb-navbar" class={`navbar ${props.darkMode && 'dark'}`}>
        {/* we aren't implementing tabs. don't need this yet. */}
        {/* {mobile.value && props.navLinks && (
          <Burger toggleOpen={toggleOpen} open={burgerOpen.value} />
        )} */}
        <div class="navbar-brand-container">
          <img class="navbar-logo" alt="Tagboard logo" src={require('@/assets/logo.png')} />
          <div class="navbar-brand">{props.appName}</div>
        </div>
        <div class="navbar-links-container navbar-links-left">
          <div
            data-testid="navbar-links"
            class="navbar-links"
            style={mobile.value ? {
              transition: 'transform 0.5s ease-in-out',
              transform:  burgerOpen.value ? 'translateX(100%)' : 'translateX(0)',
            } : ''
            }
          >
            {renderTabs()}
          </div>
        </div>
        <div class="navbar-links-container">
          <div class="nav-icon">
            <img
              class="help-icon"
              alt="help-icon"
              src="https://img.pngio.com/help-icon-transparent-background-83167-free-icons-library-help-icon-png-2000_2000.jpg"
            />
          </div>
          <div class="nav-icon">
            <Launcher open={launcherOpen.value} toggleOpen={toggleOpen} />
          </div>
          <div class="nav-icon">
            <AccountDropdown open={accountOpen.value} toggleOpen={toggleOpen} user={props.user} />
          </div>
        </div>
      </div>
    )
  }
})