import { Meta, StoryObj } from '@storybook/react';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';

import { Scroll, Size } from '../common';
import Modal from '../modal';
import { lorem10, lorem40 } from '../test-utils';

import Accordion from './Accordion';

/**
 * Metadata for the Accordion component story.
 */
const meta: Meta<typeof Accordion> = {
  component: Accordion,
  title: 'Content/Accordion',
  parameters: {
    docs: {
      description: {
        component:
          'A simple accordion component that displays a list of items that can be expanded or collapsed.',
      },
    },
    tags: ['autodocs'],
  },
  args: {
    items: [
      {
        title: 'Item 1',
        content: lorem10,
        id: 'Item 1',
      },
      {
        title: 'Item 2',
        subtitle: 'Second item',
        content: lorem40,
        id: 'Item 2',
      },
      {
        title: 'Item 3',
        content: lorem10,
        id: 'Item 3',
      },
      {
        title: 'Item 4',
        content: lorem10,
        id: 'Item 4',
        icon: <FastFlagIcon size={24} />,
      },
      {
        title: 'Item 5',
        subtitle: 'Fifth item',
        content: lorem10,
        id: 'Item 5',
        icon: <FastFlagIcon size={24} />,
      },
    ],
  },
};

export default meta;
type Story = StoryObj<typeof Accordion>;

export const Default: Story = {
  args: {
    indexOpen: 0,
  },
  parameters: {
    docs: {
      description: {
        story: 'A basic example of the Accordion component with one item open by default.',
      },
    },
  },
};

export const Multiple: Story = {
  render: (args) => {
    const items = args.items;
    return (
      <>
        <Accordion {...args} items={[items[0]]} />
        <Accordion {...args} items={[items[0]]} indexOpen={0} />
        <Accordion {...args} items={items} />
      </>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'An example of the Accordion component with multiple instances and items.',
      },
    },
  },
};

export const WithinModal: Story = {
  parameters: {
    docs: {
      description: {
        story: 'An example of the Accordion component used inside a modal.',
      },
    },
    chromatic: {
      delay: 1000,
    },
  },
  render: (args) => {
    const items = args.items;
    return (
      <Modal
        body={
          <div className="p-a-1">
            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
            <Accordion {...args} items={[items[0]]} />
            <Accordion {...args} items={[items[0]]} indexOpen={0} />
            <Accordion {...args} items={items} />
          </div>
        }
        scroll={Scroll.CONTENT}
        size={Size.LARGE}
        open
        footer={
          <div className="p-a-3 text-xs-center">
            <a href="/large-amounts">Learn more</a>
          </div>
        }
        onClose={() => {}}
      />
    );
  },
};
