import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import {
  AccordionActionDirective,
  AccordionActionsComponent,
  AccordionComponent,
  AccordionItemComponent,
  ButtonComponent,
  EngieTemplateDirective,
  IconComponent
} from '../../public-api';

/**
 * 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<AccordionComponent> = {
  title: 'Components/Accordion/Accordion',
  id: 'accordion',
  component: AccordionComponent,
  decorators: [
    moduleMetadata({
      imports: [
        AccordionItemComponent,
        AccordionActionsComponent,
        AccordionActionDirective,
        EngieTemplateDirective,
        ButtonComponent,
        IconComponent
      ]
    })
  ],
  parameters: {
    docs: {
      since: '2.8.0',
      imports: [AccordionComponent, AccordionItemComponent, AccordionActionsComponent, AccordionActionDirective]
    }
  },
  argTypes: {
    collapseAllItems: {
      control: {
        type: null
      }
    },
    expandAllItems: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<AccordionComponent>;

export const Basic: Story = {
  render: (args) => ({
    props: args,
    template: `
<nj-accordion ${argsToTemplate(args)}>
  <details nj-accordion-item label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item label="Header 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item label="Header 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, dolorum esse fugit id impedit maiores nisi numquam quaerat quod voluptatibus.
  </details>
</nj-accordion>
    `
  })
};

export const WithAction: Story = {
  name: 'With action buttons',
  parameters: {
    docs: {
      description: {
        story: 'Add global action to expand or collapse all items with on click.'
      }
    }
  },
  render: (args) => ({
    props: args,
    template: `
<nj-accordion ${argsToTemplate(args)}>
  <nj-accordion-actions>
    <nj-button emphasis="subtle" njAccordionAction="expand">Expand all</nj-button>
    <nj-button emphasis="subtle" njAccordionAction="collapse">Collapse all</nj-button>
  </nj-accordion-actions>
  <details nj-accordion-item label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item label="Header 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item label="Header 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, dolorum esse fugit id impedit maiores nisi numquam quaerat quod voluptatibus.
  </details>
</nj-accordion>
    `
  })
};

export const OneAtATime: Story = {
  name: 'Open items one at a time',
  parameters: {
    docs: {
      description: {
        story: "Items can be opened one at a time with the details' `name` property"
      }
    }
  },
  render: (args) => ({
    props: args,
    template: `
<nj-accordion ${argsToTemplate(args)}>
  <details nj-accordion-item name="accordion-group" label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item name="accordion-group" label="Header 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item name="accordion-group" label="Header 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, dolorum esse fugit id impedit maiores nisi numquam quaerat quod voluptatibus.
  </details>
</nj-accordion>
    `
  })
};

export const Separated: Story = {
  name: 'Add space between items',
  parameters: {
    docs: {
      description: {
        story: 'Accordion can be more spaced with the `separated` property'
      }
    }
  },
  args: {
    separated: true
  },
  render: (args) => ({
    props: args,
    template: `
<nj-accordion ${argsToTemplate(args)}>
  <details nj-accordion-item label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item label="Header 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item label="Header 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, dolorum esse fugit id impedit maiores nisi numquam quaerat quod voluptatibus.
  </details>
</nj-accordion>
    `
  })
};

export const NoBorder: Story = {
  name: 'Remove border',
  parameters: {
    docs: {
      description: {
        story: 'Borders can be removed with the `noBorder` property'
      }
    }
  },
  args: {
    noBorder: true
  },
  render: (args) => ({
    props: args,
    template: `
<nj-accordion ${argsToTemplate(args)}>
  <details nj-accordion-item label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item label="Header 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item label="Header 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, dolorum esse fugit id impedit maiores nisi numquam quaerat quod voluptatibus.
  </details>
</nj-accordion>
    `
  })
};