/*!
 * Copyright (c) 2024 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 */

import '../../less/astro/main.less';

import type { StoryObj } from '@storybook/html';
import { container, html } from '../utils';

export default {
  title: 'Layout/Navigation Bar',
  decorators: [container('container-fluid')],
};

type Story = StoryObj<any>;

const commonOptions: Partial<Story> = {
  argTypes: {
    callForActionText: { 
      control: 'text',
      description: 'The text for the call for action button'
    },
    callForActionIcon: {
      control: 'text',
      description: 'The FontAwesome icon for the call for action button'
    },
    hideCallForAction: {
      control: 'boolean',
    },
    logo: {
      control: 'text',
      description: 'The url to the logo image',
    },
    logoWidth: {
      control: 'number',
    },
  },
  args: {
    logo: 'https://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-foundation-grey-orange.svg',
    logoWidth: 150,
    callForActionText: 'Download',
    callForActionIcon: 'fa-download',
    hideCallForAction: false,
  },
}

const commonNavbar = ({
  logo,
  logoWidth,
  title,
  callForActionUrl,
  callForActionText,
  callForActionIcon,
  hideCallForAction,
  children
}: any) => html`
  <header class="header-wrapper">
    <div class="header-navbar-wrapper">
      <div class="container">
        <div class="header-navbar">
          <div class="header-navbar-brand">
            <a class="logo-wrapper" href="/" title="${title}">
              <img src="${logo}" width=${logoWidth} alt="${title}" href="${callForActionUrl}">
            </a>
          </div>
          ${children}
          <div class="header-navbar-end">
            ${!hideCallForAction
              ? html`
                <a class="header-navbar-end-download-btn btn btn-primary" href="${callForActionUrl}">
                  <i class="fa ${callForActionIcon}" aria-hidden="true"></i>
                  ${callForActionText}
                </a>
              `
              : ''}
            <button class="mobile-menu-btn" aria-label="Toggle mobile navigation menu" aria-expanded="false">
              <i class="fa fa-bars fa-xl" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
`;

const directMenu = [
  {
    id: 'projects',
    name: 'Projects',
    href: '#',
  },
  {
    id: 'working-groups',
    name: 'Working Groups',
    href: '#',
  },
  {
    id: 'members',
    name: 'Members',
    href: '#',
  }
];

export const Direct: Story = {
  ...commonOptions,
  render: (args) => {
    return commonNavbar({
      ...args,
      children: html`
        <nav class="header-navbar-nav">
          <ul class="header-navbar-nav-links">
            ${directMenu.map(menuItem => html`
                <li class="navbar-nav-links-item">
                  <a class="link-unstyled" href="${menuItem.href}">${menuItem.name}</a>
                </li>
              `)
              .join('')
            }
          </ul>
        </nav>
      `,
    }); 
  },
}

const dropdownMenu = [
  {
    id: 'projects',
    name: 'Projects',
    href: '#',
    children: [
      {
        id: 'projects-finder',
        name: 'Projects Finder',
        href: '#',
      },
      {
        id: 'projects-activity',
        name: 'Projects Activity',
        href: '#',
      },
      {
        id: 'projects-resources',
        name: 'Projects Resources',
        href: '#',
      },
      {
        id: 'projects-specifications',
        name: 'Specifications',
        href: '#',
      },
      {
        id: 'projects-contribute',
        name: 'Contribute',
        href: '#',
      }
    ]
  },
  {
    id: 'working-groups',
    name: 'Working Groups',
    href: '#',
    children: [],
  },
  {
    id: 'members',
    name: 'Members',
    href: '#',
    children: [],
  }
];

const renderDirectMenuItem = (menuItem: any) => html`<li><a class="link-unstyled" href="${menuItem.href}">${menuItem.name}</a></li>`;

export const Dropdown: Story = {
  ...commonOptions,
  render: (args) => {
    return commonNavbar({
      ...args,
      children: html`
        <nav class="header-navbar-nav">
          <ul class="header-navbar-nav-links">
            ${dropdownMenu.map(menuItem => html`
                <div class="dropdown">
                  ${menuItem.children?.length > 0
                    ? html`
                      <button class="btn-link link-unstyled" id="${menuItem.id}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        ${menuItem.name}
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="${menuItem.id}">
                        ${menuItem?.children.map(renderDirectMenuItem).join('')}
                      </ul>
                    `
                    : renderDirectMenuItem(menuItem) 
                  }
                </div>
              `)
              .join('')
            }
          </ul>
        </nav>
      `,
    })
  }
}

