import type {Meta, StoryObj} from '@storybook/angular';
import {moduleMetadata} from '@storybook/angular';
import {DsNavbar} from './ds-navbar';
import {CommonModule} from '@angular/common';
import {Store, StoreModule} from '@ngrx/store';
import {reducers} from '../reducers';
import {ActivatedRoute, RouterModule} from '@angular/router';
import {Logo} from '../logo/logo';

const appReducer = reducers.app;

/**
 * # Navigation Bar Component
 *
 * The DsNavbar component provides the main navigation for the application.
 * It includes:
 * - Brand logo
 * - Navigation links
 * - Dropdown menus
 * - Mobile-responsive hamburger menu
 */
const meta: Meta<DsNavbar> = {
  title: 'UI/Navigation/Navbar',
  component: DsNavbar,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        Logo,
        StoreModule.forRoot({app: appReducer as any}),
        RouterModule.forChild([]),
      ],
      providers: [
        Store,
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {
              paramMap: {
                get: () => null
              }
            }
          }
        }
      ]
    })
  ],
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component: 'The main navigation bar component used throughout the application. It provides navigation links, dropdown menus, and is responsive for mobile devices.'
      }
    }
  }
};

export default meta;
type Story = StoryObj<DsNavbar>;

/**
 * Default state of the navigation bar.
 */
export const Default: Story = {
  args: {}
};

/**
 * Navigation bar with active link highlighting.
 * This example simulates when a user is on a specific page.
 */
export const WithActiveLink: Story = {
  args: {},
  parameters: {
    docs: {
      description: {
        story: 'Shows the navigation bar with an active link highlighted. This represents the state when a user is on a specific page.'
      }
    }
  }
};

/**
 * Mobile view of the navigation bar with hamburger menu.
 */
export const MobileView: Story = {
  args: {},
  parameters: {
    viewport: {
      defaultViewport: 'mobile1'
    },
    docs: {
      description: {
        story: 'Shows the navigation bar in mobile view with the hamburger menu. This is how the component appears on smaller screens.'
      }
    }
  }
};
