import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { NJIcon } from '../icon/NJIcon';
import { NJAccordion } from './NJAccordion';
import { NJAccordionItem } from './NJAccordionItem';
import { NJAccordionItemContent } from './NJAccordionItemContent';
import { NJAccordionItemHeader } from './NJAccordionItemHeader';

/**
 * Represents a single collapsible item within the `NJAccordion` component.
 */
const meta: Meta<typeof NJAccordionItem> = {
  title: 'Components/Accordion/Subcomponents/Accordion item',
  id: 'accordion-item',
  component: NJAccordionItem,
  parameters: {
    docs: {
      imports: [NJAccordion, NJAccordionItem, NJAccordionItemHeader, NJAccordionItemContent]
    }
  }
};

export default meta;

type Story = StoryObj<typeof meta>;

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

/**
 * Icon can be set with the `icon` property
 */
export const Icon: Story = {
  name: 'With an icon',
  args: {
    icon: <NJIcon name="info_outlined" />
  },
  render: (props) => {
    return (
      <NJAccordion>
        <NJAccordionItem {...props}>
          <NJAccordionItemHeader>Header</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );
  }
};

/**
 * Accordion item can be opened by default by setting the `open` property
 */
export const AlreadyOpened: Story = {
  name: 'Opened by default',
  args: {
    open: true
  },
  render: (props) => {
    return (
      <NJAccordion>
        <NJAccordionItem {...props}>
          <NJAccordionItemHeader>Header</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );
  }
};

/**
 * In an Accordion component, 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>
      <NJAccordionItem {...props} name={'accordion-group'} open>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem {...props} name={'accordion-group'}>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
      <NJAccordionItem {...props} name={'accordion-group'}>
        <NJAccordionItemHeader>Header</NJAccordionItemHeader>
        <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
      </NJAccordionItem>
    </NJAccordion>
  )
};

/**
 * Passing a custom header to the `NJAccordionItemHeader` component
 */
export const CustomHeader: Story = {
  name: 'With a custom header',
  render: (props) => {
    return (
      <NJAccordion>
        <NJAccordionItem>
          <NJAccordionItemHeader {...props}>
            <span
              style={{
                display: 'inline-flex',
                alignItems: 'baseline',
                gap: 'var(--nj-semantic-size-spacing-8)'
              }}
            >
              Header
              <span
                style={{
                  fontSize: 'var(--nj-semantic-font-size-text-xs-desktop)',
                  color: 'var(--nj-semantic-color-text-neutral-tertiary-default)'
                }}
              >
                subtitle
              </span>
            </span>
          </NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );
  }
};