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

import Anchor from '.';

export default {
  title: 'Theme/Modules/Anchor/Template Two',
  component: Anchor,
  argTypes: {
    module: {
      name: 'module',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'The module data object including list of sections.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
    },
    showTitle: {
      name: 'showTitle',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Determines whether to show the title or not.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that generates some label items, and the user can navigate inside a page by clicking on them, takes the user to specific parts of the page',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <Stories />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const sections = [
  'section-one',
  'section-two',
  'section-three',
  'section-four',
  'section-five',
  'section-six',
  'section-seven',
  'section-eight',
  'section-nine',
  'section-ten',
  'section-eleven',
  'section-twelf',
];

const Template = (args) => (
  <>
    <Anchor {...args} />
    {sections?.map((sec) => (
      <div id={sec}>
        <h2>{sec}</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's 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.
        </p>
      </div>
    ))}
  </>
);

export const Default = Template.bind({});
Default.args = {
  module: {
    items: [
      { label: 'section-one' },
      { label: 'section-two' },
      { label: 'section-three' },
      { label: 'section-four' },
      { label: 'section-five' },
      { label: 'section-six' },
      { label: 'section-seven' },
      { label: 'section-eight' },
      { label: 'section-nine' },
      { label: 'section-ten' },
      { label: 'section-eleven' },
      { label: 'section-twelf' },
    ],
  },
  sliderGap: 10,
  headerOffset: 0,
};
