import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';

import MainProvider from '~context/MainProvider';
import Navigation from '.';
// import styles from '../../../../.storybook/storybook-styles/navigation.module.scss';
import mlogo from '../../../../static/images/logo.svg';
import getNavigation from '~tests/factories/sections/navigationStatic.factory';

export default {
  title: 'Theme/Layout/Navigation/Menu',
  component: Navigation,
  argTypes: {
    section: {
      name: 'section',
      type: { name: 'object', required: false },
      defaultValue: {
        modules: [getNavigation()],
      },
      description: `The section object includes a list of menu objects and any extra fields.`,
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
    },
    hasSearch: {
      name: 'hasSearch',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: `Enables search in navigation.`,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    sticky: {
      name: 'sticky',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: `Makes the navigation stiky on the top of the page.`,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    orientation: {
      name: 'orientation',
      type: { name: 'string', required: false },
      defaultValue: 'horizontal',
      description: 'Orientation for the menu',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'horizontal' },
      },
      control: {
        type: 'inline-radio',
        options: ['horizontal'],
      },
    },
    mobileAnimation: {
      name: 'mobileAnimation',
      type: { name: 'string', required: false },
      defaultValue: 'collapseFull',
      description:
        'Mobile animation for the menu. Collpse full with go full height, collape will go a maximum height of 500px when menu open on mobile',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'collapseFull' },
      },
      control: {
        type: 'inline-radio',
        options: ['collapseFull', 'collapse', 'slideLeft', 'slideTop'],
      },
    },
    stopScrollOnOpen: {
      name: 'stopScrollOnOpen',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: `When mobile menu is open, determines whether to stop scrolling the main content in the background or not. Toggle mobileAnimation to 'Collapse' to test this. May have to refresh storybook to see this`,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    canOpenAllSubMenus: {
      name: 'canOpenAllSubMenus',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: `When mobile menu is open, determines whether multiple submenus can be opened at once or not`,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    hasCustomComponent: {
      name: 'hasCustomComponent',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: `Enables a custom component for navigation`,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    template: {
      name: 'template',
      type: { name: 'string', required: false },
      defaultValue: 'homepage',
      description: `Template of the page. For ppc templates menu is not displayed.`,
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'homepage' },
      },
    },
    logo: {
      name: 'logo',
      type: { name: 'string', required: false },
      defaultValue: mlogo,
      description: `The logo image URL.`,
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: mlogo },
      },
    },
    logoWidth: {
      name: 'logoWidth',
      type: { name: 'number', required: false },
      defaultValue: 200,
      description: `The logo width.`,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 200 },
      },
    },
    logoHeight: {
      name: 'logoHeight',
      type: { name: 'number', required: false },
      defaultValue: 31,
      description: `The logo height.`,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 31 },
      },
    },
    searchIcon: {
      name: 'searchIcon',
      type: { name: 'element', required: false },
      defaultValue: null,
      description: `The search button icon, related to search form. Send in a custom search icon`,
      table: {
        type: { summary: 'element' },
        defaultValue: { summary: null },
      },
    },
    children: {
      name: 'children',
      type: { name: 'node', required: false },
      defaultValue: null,
      description: `Send a child component to navigation. Ex: Bonus component`,
      table: {
        type: { summary: 'node' },
        defaultValue: { summary: null },
      },
    },
    customStyles: {
      name: 'customStyles',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: `Send in custom styles for the Nav`,
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'The top section of the site which displays the site logo, search and main menu.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <MainProvider value={{}}>
    <Navigation {...args} />

    <main>
      <div>
        <h2>
          Dummy content added for testing purposes. Toggle the controls <pre>Sticky</pre> (both
          desktop and mobile) and <pre>stopScrollOnOpen</pre> and <pre>mobileAnimation</pre> (for
          mobile) and then scroll this page to see the difference.
          <br />
          May have to refresh storybook to see this
        </h2>
      </div>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
        been the industrys standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
        passages, and more recently with desktop publishing software like Aldus PageMaker including
        versions of Lorem Ipsum.
      </div>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
        been the industrys standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
        passages, and more recently with desktop publishing software like Aldus PageMaker including
        versions of Lorem Ipsum.
      </div>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
        been the industrys standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
        passages, and more recently with desktop publishing software like Aldus PageMaker including
        versions of Lorem Ipsum.
      </div>
    </main>
  </MainProvider>
);
export const Default = Template.bind({});
Default.args = {};
