import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import ChecButton from '../../components/ChecButton.vue';
import ChecNavigation from '../../components/ChecNavigation.vue';
import StoryRouter from 'storybook-vue-router';
import { boolean, select } from '@storybook/addon-knobs';
import { action } from "@storybook/addon-actions";
const routes = [
  {
    path: '/orders',
  },
  {
    path: '/account',
  },
  {
    path: '/products',
  },
  {
    path: '/categories',
  },
];

<Meta title="Components/Navigation" component={ChecNavigation} />

# Navigation

The Navigation component takes a "tree" of navigation links and renders a sidebar with buttons for sections, and
an expandable "drawer" that shows sub-navigation for each section. This component is fairly "dumb", and respects
the order of the "tree" that it is given

<Props of={ChecNavigation} />

<Preview>
  <Story name="Default" decorators={[ StoryRouter({}, { routes })]}>
    {{
      components: {
        ChecButton,
        ChecNavigation
      },
      props: {
        open: {
          type: Boolean,
          default: boolean('Open drawer', false),
        },
        controlled: {
          type: Boolean,
          default: boolean('"Controlled" mode', false),
        },
        pingOnOrders: {
          type: Boolean,
          default: boolean('Ping on orders', true),
        },
        activeSection: {
          type: String,
          default: select('Active section', ['Orders', 'Products', 'Spaces storefront'], 'Orders'),
        }
      },
      computed: {
        tree() {
          return [
            {
              label: 'Orders',
              icon: 'orders',
              links: [
                {
                  label: 'Orders',
                  to: '/orders',
                },
              ],
            },
            {
              label: 'Products',
              icon: 'products',
              ping: this.pingOnOrders,
              links: [
                {
                  label: 'Products',
                  to: '/products',
                },
                {
                  label: 'Categories',
                  to: '/categories',
                },
              ],
            },
            {
              label: 'Spaces storefront',
              icon: 'spaces',
              divider: true,
              links: [
                {
                  label: 'View storefront',
                  to: 'https://google.com',
                }
              ]
            }
          ];
        },
      },
      data() {
        return {
          user: {
            label: 'Account',
            divider: true,
            links: [
              {
                label: 'Edit account',
                to: '/account',
              },
              {
                label: 'Logout',
                handle: action('Logged out!'),
              }
            ]
          }
        };
      },
      template: `
      <div class="w-full">
        <ChecNavigation
          :active-label="activeSection"
          :tree="tree"
          :user-section="user"
          :open="open"
          :controlled="controlled"
          homeLink="/"
        >
          <div class="h-12 flex items-center justify-between">
            <div class="leading-none">
              Leslie Lawless<br />
              <small class="text-gray-400 mt-1">#123</small>
            </div>
            <ChecButton icon="link" variant="small" @click.prevent tabindex="-1" />
          </div>
        </ChecNavigation>
        <input type="text" id="main" class="ml-32 border" />
        <input type="text" class="border" />
      </div>`
    }}
  </Story>
</Preview>
