import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { NJAccordion } from './NJAccordion';
import { NJAccordionAction } from './NJAccordionAction';
import { NJAccordionActions } from './NJAccordionActions';
import { NJAccordionItem } from './NJAccordionItem';
import { NJAccordionItemContent } from './NJAccordionItemContent';
import { NJAccordionItemHeader } from './NJAccordionItemHeader';

/**
 * The Accordion component is designed to organize content in a collapsible manner,
 * facilitating efficient use of screen space while providing a structured layout.
 * It enables users to expand or collapse sections of content as needed, promoting a streamlined user experience.
 */
const meta: Meta<typeof NJAccordion> = {
  title: 'Components/Accordion',
  id: 'accordion',
  component: NJAccordion,
  parameters: {
    docs: {
      imports: [
        NJAccordion,
        NJAccordionAction,
        NJAccordionActions,
        NJAccordionItem,
        NJAccordionItemContent,
        NJAccordionItemHeader
      ]
    }
  }
};

export default meta;

type Story = StoryObj<typeof NJAccordion>;

export const Basic: Story = {
  render: (props) => {
    return (
      <NJAccordion {...props}>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );
  }
};

/**
 * Accordion items can be linked with the `name` property, allowing only one item to be opened at a time.
 */
export const OneAtATime: Story = {
  name: 'Open one item at a time',
  render: (props) => (
    <NJAccordion {...props}>
      <NJAccordionItem name={'accordion-group'} open>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem name={'accordion-group'}>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem name={'accordion-group'}>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
    </NJAccordion>
  )
};

/**
 * Global controls can be added with `NJAccordionAction` components.
 */
export const GlobalControls: Story = {
  name: 'Add global controls',
  render: (props) => (
    <NJAccordion {...props}>
      <NJAccordionActions {...props}>
        <NJAccordionAction label="Expand All" action="expand" />
        <NJAccordionAction label="Collapse All" action="collapse" />
      </NJAccordionActions>
      <NJAccordionItem open>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
    </NJAccordion>
  )
};