<template>
  <div class="demo-page">
    <h1>Navigation &amp; Menus</h1>

    <div class="demo-block">
      <h2>Header Bar/Hamburger Menu</h2>

      <ElMenu
        :default-active="activeIndex1"
        :router="true"
        menu-trigger="click"
        mode="horizontal"
      >
        <TfHamburgerMenu :badge-count="2">
          <TfHamburgerMenuItem
            :to="{ name: 'Home' }"
            title="Parent Item 1"
            type="parent"
          />
          <TfHamburgerMenuItem
            :to="{ name: 'Home' }"
            title="Parent Item 2"
            type="parent"
          />
          <TfHamburgerMenuItem
            :to="{ name: 'NavigationAndMenus' }"
            title="Link to Current Page"
            type="parent"
          />
          <TfHamburgerMenuItem
            :to="{ name: 'Home' }"
            title="Parent Item 4"
            type="parent"
          />
        </TfHamburgerMenu>
      </ElMenu>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget vehicula risus, vitae porta lacus. Donec viverra elementum convallis. Morbi pretium mauris in varius sagittis. Phasellus ullamcorper semper felis, vitae gravida massa ornare id. Pellentesque lobortis dui aliquam felis pretium, in venenatis ante faucibus. Fusce nec arcu a nisi consequat dapibus. Cras nec tellus at odio pretium sodales quis id arcu.</p>
      <p>Ut vel ante ex. Suspendisse dignissim luctus odio vel faucibus. Cras auctor tincidunt neque, nec convallis enim fermentum a. Sed eu quam sagittis sem eleifend congue ac vel ligula. Nam in velit leo. Ut pellentesque tempus neque, sit amet pulvinar massa egestas eget. Curabitur a ante nisl. Sed condimentum, lectus quis hendrerit cursus, augue urna convallis purus, in iaculis nunc dolor non eros. Mauris eu blandit nisi, vitae tempus ipsum.</p>
      <p>Nam dapibus, mi sed egestas condimentum, odio orci consequat lacus, id pretium tortor tortor vitae enim. Aenean ac est vitae nisi imperdiet rutrum at eu elit. Nulla suscipit euismod dui, eget elementum eros lacinia a. Nulla ut pharetra velit. Integer id lacus sit amet lorem sagittis varius a at nibh. Nunc finibus aliquam enim quis lacinia. Vestibulum nibh leo, lobortis et velit ut, ultricies placerat nunc. Fusce sed efficitur velit, ut commodo risus.</p>
    </div>

    <div class="demo-block">
      <h2>Header Bar/Hamburger Menu (broker/legacy style)</h2>

      <ElMenu
        ref="main-menu"
        :default-active="activeIndex2"
        :router="true"
        menu-trigger="click"
        mode="horizontal"
      >
        <TfHamburgerMenu
          :badge-count="20"
          mode="legacy"
          @hide="$emit('closeHamburgerMenu')"
        >
          <TfHamburgerMenuItem
            title="Parent Item 1"
            type="parent"
            :is-toggle="true"
            :is-open="true"
          >
            <TfHamburgerMenuItem
              v-for="menuItem in sampleMenuItems"
              :key="menuItem.title"
              type="child"
              v-bind="{
                badgeCount: menuItem.badgeCount,
                isOpen: menuItem.isOpen,
                isToggle: menuItem.isToggle,
                title: menuItem.title,
                to: menuItem.to,
              }"
            >
              <template v-if="menuItem.children">
                <template v-for="grandchild in menuItem.children">
                  <TfHamburgerMenuItem
                    v-if="grandchild"
                    :key="grandchild.title"
                    type="grandchild"
                    v-bind="{ ...grandchild }"
                  />
                </template>
              </template>
            </TfHamburgerMenuItem>
          </TfHamburgerMenuItem>
          <TfHamburgerMenuItem
            :to="{ name: 'Home' }"
            title="Parent Item 2"
            type="parent"
          />
          <TfHamburgerMenuItem
            :to="{ name: 'Home' }"
            title="Parent Item 3"
            type="parent"
          />
        </TfHamburgerMenu>
      </ElMenu>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget vehicula risus, vitae porta lacus. Donec viverra elementum convallis. Morbi pretium mauris in varius sagittis. Phasellus ullamcorper semper felis, vitae gravida massa ornare id. Pellentesque lobortis dui aliquam felis pretium, in venenatis ante faucibus. Fusce nec arcu a nisi consequat dapibus. Cras nec tellus at odio pretium sodales quis id arcu.</p>
      <p>Ut vel ante ex. Suspendisse dignissim luctus odio vel faucibus. Cras auctor tincidunt neque, nec convallis enim fermentum a. Sed eu quam sagittis sem eleifend congue ac vel ligula. Nam in velit leo. Ut pellentesque tempus neque, sit amet pulvinar massa egestas eget. Curabitur a ante nisl. Sed condimentum, lectus quis hendrerit cursus, augue urna convallis purus, in iaculis nunc dolor non eros. Mauris eu blandit nisi, vitae tempus ipsum.</p>
      <p>Nam dapibus, mi sed egestas condimentum, odio orci consequat lacus, id pretium tortor tortor vitae enim. Aenean ac est vitae nisi imperdiet rutrum at eu elit. Nulla suscipit euismod dui, eget elementum eros lacinia a. Nulla ut pharetra velit. Integer id lacus sit amet lorem sagittis varius a at nibh. Nunc finibus aliquam enim quis lacinia. Vestibulum nibh leo, lobortis et velit ut, ultricies placerat nunc. Fusce sed efficitur velit, ut commodo risus.</p>
    </div>
  </div>
</template>

<script>
  export default {
    provide() {
      return {
        menu: this,
      };
    },

    data: () => ({
      activeIndex1: '1',
      activeIndex2: '1',
    }),

    computed: {
      /**
       * Determine if the project has a census document or not
       *
       * @returns {boolean}
       */
      sampleMenuItems() {
        return [
          {
            title: 'Child Item 1',
            isToggle: true,
            isOpen: true,
            children: [
              {
                title: 'Grandchild Item 1',
                to: "{ name: 'Home' }",
              },
              {
                title: 'Grandchild Item 2',
                to: "{ name: 'Home' }",
              },
              {
                title: 'Grandchild Item 3',
                disabled: true,
              },
              {
                title: 'Grandchild Item 4',
                to: "{ name: 'Home' }",
                icon: 'exclamation-triangle',
              },
              {
                title: 'Grandchild Item 5',
                to: "{ name: 'Home' }",
                badgeCount: 20,
              },
            ],
          },
          {
            title: 'Child Item 2',
            to: "{ name: 'Home' }",
            badgeCount: 2,
          },
        ];
      },
    },

    methods: {
      /**
       * Close the hamburger menu's popover
       */
      closeHamburgerMenu() {
        this.$refs['main-menu'].closeMenu('1');
      },
    },
  };
</script>
