import React from 'react'
import { type Meta } from '@storybook/react'
import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
import { ExpertAdviceCollapsible, type ExpertAdviceCollapsibleProps } from '../index'

export default {
  title: 'Components/Collapsibles/ExpertAdviceCollapsible',
  parameters: {
    chromatic: { disable: false },
    controls: { disable: true },
  },
} satisfies Meta

const ExpertAdviceCollapsibleWrapped = (
  args: Omit<ExpertAdviceCollapsibleProps, 'children'>,
): JSX.Element => (
  <ExpertAdviceCollapsible open {...args}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac scelerisque sem, vel
    ultricies justo. Donec eu porttitor ante, nec gravida orci. Nulla facilisi. Cras varius erat id
    fermentum mattis. Mauris bibendum vestibulum erat, quis blandit metus viverra sit amet. Vivamus
    pretium vitae turpis ut condimentum. Sed vulputate magna nisl, in cursus urna hendrerit et.
    Aenean semper, est non feugiat sodales, nisl ligula aliquet lorem, sit amet scelerisque arcu
    quam a sapien. Donec in viverra urna.
  </ExpertAdviceCollapsible>
)

const StickerSheetTemplate: StickerSheetStory = {
  render: () => (
    <StickerSheet>
      <StickerSheet.Row header="Default">
        <ExpertAdviceCollapsibleWrapped title="Collapsible" />
      </StickerSheet.Row>
      <StickerSheet.Row header="lazyLoad">
        <ExpertAdviceCollapsibleWrapped title="Lazy load" lazyLoad />
      </StickerSheet.Row>
    </StickerSheet>
  ),
}

export const StickerSheetDefault: StickerSheetStory = {
  ...StickerSheetTemplate,
  name: 'Sticker Sheet (Default)',
}

export const StickerSheetRTL: StickerSheetStory = {
  ...StickerSheetTemplate,
  name: 'Sticker Sheet (RTL)',
  parameters: { textDirection: 'rtl' },
}
