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

type AccordionItemComponentWithContent = AccordionItemComponent & { content: string };

const meta: Meta<AccordionItemComponentWithContent> = {
  title: 'Components/Accordion/Accordion item',
  id: 'accordion-item',
  component: AccordionItemComponent,
  decorators: [
    moduleMetadata({
      imports: [AccordionComponent, EngieTemplateDirective, IconComponent]
    }),
    componentWrapperDecorator(AccordionComponent)
  ],
  parameters: {
    docs: {
      since: '2.8.0',
      imports: [AccordionComponent, AccordionItemComponent, EngieTemplateDirective]
    }
  },
  argTypes: {
    content: {
      description: "This attribute doesn't exist. It is for documentation purpose only"
    },
    scale: {
      type: 'string',
      control: 'radio',
      options: ['md', 'lg']
    },
    collapse: {
      control: {
        type: null
      }
    },
    expand: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<AccordionItemComponentWithContent>;

export const Default: Story = {
  args: {
    label: 'Header',
    content: 'Lorem ipsum doloris.'
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item ${argsToTemplate(args, { exclude: ['content'] })}>
    {{content}}
</details>
    `
  })
};

export const CustomHeader: Story = {
  name: 'With a custom header',
  parameters: {
    docs: {
      description: {
        story:
          'You can use a custom header instead of a label with the `header` selector of the `EngieTemplateDirective`'
      }
    }
  },
  args: {
    content: 'Lorem ipsum doloris.'
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item ${argsToTemplate(args, { exclude: ['content'] })}>
  <span *njTemplate="'header'" style="display: inline-flex; align-items: baseline; gap: var(--nj-semantic-size-spacing-8)">
    Header
    <span style="font-size: var(--nj-semantic-font-size-text-xs-desktop); color: var(--nj-semantic-color-text-neutral-tertiary-default)">
    subtitle</span>
  </span>
  {{content}}
</details>
    `
  })
};

export const Size: StoryObj<Omit<AccordionItemComponentWithContent, 'scale' | 'label'>> = {
  name: 'Size variants',
  parameters: {
    docs: {
      description: {
        story: 'Size can be modified with the `scale` property'
      }
    }
  },
  args: {
    content: 'Lorem ipsum doloris.'
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item label="Scale md (default)" ${argsToTemplate(args, { exclude: ['content'] })}>
    {{content}}
</details>
<details nj-accordion-item label="Scale lg" scale="lg" ${argsToTemplate(args, { exclude: ['content'] })}>
    {{content}}
</details>
    `
  })
};

export const WithLeadingIcon: Story = {
  name: 'With a leading icon',
  parameters: {
    docs: {
      description: {
        story: 'Add a leading icon to the label with an `EngieTemplateDirective` with `icon` selector'
      }
    }
  },
  args: {
    label: 'Header',
    content: 'Lorem ipsum doloris.'
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item ${argsToTemplate(args, { exclude: ['content'] })}>
    <nj-icon *njTemplate="'icon'" name="info"></nj-icon>
    {{content}}
</details>
    `
  })
};

export const LeadingToggle: Story = {
  name: 'Use leading toggle icon',
  parameters: {
    docs: {
      description: {
        story:
          'Toggle icon can be placed at the start of the accordion item by using the `hasLeadingToggleIcon` property'
      }
    }
  },
  args: {
    label: 'Header',
    content: 'Lorem ipsum doloris.',
    hasLeadingToggleIcon: true
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item ${argsToTemplate(args, { exclude: ['content'] })}>
    <nj-icon *njTemplate="'icon'" name="info"></nj-icon>
    {{content}}
</details>
    `
  })
};

export const WithAltToggleIcon: Story = {
  name: 'With alternative toggle icon',
  parameters: {
    docs: {
      description: {
        story:
          'Add and remove icons can be used in place of the arrow icon for the toggle. Use the `useAlternativeToggleIcon` property'
      }
    }
  },
  args: {
    label: 'Header',
    content: 'Lorem ipsum doloris.',
    useAlternativeToggleIcon: true
  },
  render: (args) => ({
    props: args,
    template: `
<details nj-accordion-item ${argsToTemplate(args, { exclude: ['content'] })}>
    {{content}}
</details>
    `
  })
};