<template>
  <div
    id="app"
    class="app"
  >
    <TfPanel
      v-if="panel.visible"
      class="legacy-panel"
      :open="panel.open"
      panel-trigger="panels"
      back-url="/examples/panels1"
      action="togglePanel"
      data-do-not-close-panel
    >
      Panel v1 Content
      <!-- We could put any content/component in here -->
    </TfPanel>
    <header>
      <ElMenu
        ref="main-menu"
        :default-active="activeIndex"
        :router="true"
        menu-trigger="click"
        mode="horizontal"
      >
        <h2 class="page-title">
          <RouterLink
            to="/examples"
            v-text="`TF Shared Components Libary v${appVersion}`"
          />
          <template v-if="$route.meta.title">
            > {{ $route.meta.title }}
          </template>
        </h2>
        <TfHamburgerMenu id="example-menu">
          <TfHamburgerMenuItem
            v-for="item of sortedItems"
            :key="item.title"
            :title="item.title"
            type="parent"
            :is-toggle="true"
            :is-open="true"
          >
            <TfHamburgerMenuItem
              v-for="({ title, to }) of item.children"
              :key="title"
              type="child"
              v-bind="{
                title,
                to,
              }"
            />
          </TfHamburgerMenuItem>
        </TfHamburgerMenu>
      </ElMenu>
    </header>

    <main>
      <RouterView :menu-items="sortedItems" />
    </main>
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'Exampleindex',
    provide() {
      return {
        menu: this,
      };
    },
    data: () => ({
      activeIndex: '1',
      appVersion: process.env.VUE_APP_VERSION,
      menuItems: [
        {
          to: '#1',
          title: 'UIv4',
          children: [
            { to: '/examples/colors', title: 'Colors' },
            { to: '/examples/app-alert', title: 'AppAlert' },
            { to: '/examples/app-button', title: 'AppButton' },
            { to: '/examples/app-icon', title: 'AppIcon' },
            { to: '/examples/app-quote-edit-item', title: 'AppQuoteEditItem' },
          ],
        },
        {
          title: 'Components',
          to: '#2',
          children: [
            { to: '/examples/comments', title: 'Comments' },
            { to: '/examples/date-picker', title: 'Date Picker' },
            { to: '/examples/form-elements', title: 'Form Elements' },
            { to: '/examples/form-elements-storybook-layout', title: 'Form Elements ("storybook" layout)' },
            { to: '/examples/tooltips', title: 'Tooltips v1' },
            { to: '/examples/tooltips2', title: 'Tooltips v2' },
            { to: '/examples/files', title: 'Uploading & File Lists' },
            { to: '/examples/alerts', title: 'Alerts' },
            { to: '/examples/panels1', title: 'Panels v1' },
            { to: '/examples/panels2', title: 'Panels v2' },
            { to: '/examples/navigation-and-menus', title: 'Navigation' },
            { to: '/examples/tables', title: 'tf-table' },
            { to: '/examples/tabs', title: 'Tabs' },
            { to: '/examples/misc', title: 'Miscellaneous' },
            { to: '/examples/rfp-table', title: 'RFP Table' },
            { to: '/examples/product-selector', title: 'tf-product-selector' },
            { to: '/examples/pdf-exports', title: 'PDF Exports' },
            { to: '/examples/pagination', title: 'tf-pagination' },
            { to: '/examples/badge', title: 'tf-badge' },
          ],
        },
        {
          title: 'Authentication',
          to: '#3',
          children: [
            { to: '/examples/authentication-pages/sign-in', title: 'Sign In' },
            { to: '/examples/authentication-pages/register', title: 'Register' },
            { to: '/examples/authentication-pages/terms', title: 'Terms of Use' },
            { to: '/examples/authentication-pages/forgot-password', title: 'Forgot Password' },
            { to: '/examples/authentication-pages/register/confirmation', title: 'Confirmation' },
            { to: '/examples/authentication-pages/register/confirm-email', title: 'Confirm Email' },
            { to: '/examples/authentication-pages/register/resend-confirmation', title: 'Resend Confirmation' },
            { to: '/examples/authentication-pages/register/reset-password', title: 'Reset Password' },
          ],
        },
        {
          to: '#4',
          title: 'Utilities',
          children: [
            { to: '/examples/formatting', title: 'Formatting' },
            { to: '/examples/product', title: 'Product' },
            { to: '/examples/typography', title: 'Typography' },
          ],
        },
      ],
    }),
    computed: {
      ...mapState({
        panel: (state) => state.panelsV1.panel,
      }),
      /**
       * Sorting the children of each menu item by their title
       *
       * @returns {Array}
       */
      sortedItems() {
        return this.menuItems.map((item) => ({
          ...item,
          children: this.$TF.Formatting.sortObjects(item.children, 'title'),
        }));
      },
    },
    methods: {
      /**
       * Close the hamburger menu
       */
      closeHamburgerMenu() {
        this.$refs['main-menu'].closeMenu('1');
      },
    },
  };
</script>

<style lang="scss">
  :root {
    --primary: #7e0d7e;
    --primary-dark: #390439;
    --primary-light-1: #ae2eae;
    --primary-light-2: #da5ada;
    --secondary: #c3ca66;
  }
</style>

<style lang="scss" scoped>
  header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
  }

  main {
    padding-top: 56px;
  }

  .page-title {
    padding-left: 40px;
  }

  #example-menu {
    ::v-deep.tf-hamburger-popper {
      max-height: calc(100vh - 200px);
      overflow-y: scroll;
    }
  }
</style>
