import React, { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';

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

import Accordion from './Accordion';
import Button from '../button/Button';

/**
 * 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.',
      },
    },
  },
  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} />,
      },
      {
        title: 'Item 6',
        subtitle: 'Sixth item',
        content: lorem10,
        id: 'Item 6',
        icon: <CardWiseIcon size={24} />,
        media: (
          <img
            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
            alt=""
          />
        ),
      },
      {
        title: 'Item 7',
        subtitle: 'Seventh item',
        content: lorem10,
        id: 'Item 7',
        media: (
          <img
            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
            alt=""
          />
        ),
        showMediaAtAllSizes: false,
        showMediaCircle: false,
        isContainerAligned: false,
      },
    ],
  },
};

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;
    return (
      <>
        <Accordion {...args} items={[items[0]]} />
        <Accordion {...args} items={[items[0]]} indexOpen={0} />
        <Accordion {...args} items={items} />
        <Accordion {...args} items={[items[6]]} indexOpen={0} />
      </>
    );
  },
  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, { viewMode }) => {
    // Modal is open by default unless in docs view
    const [open, setOpen] = useState(viewMode !== 'docs');
    const { items } = args;

    return (
      <>
        <Button v2 onClick={() => setOpen(true)}>
          Open Modal
        </Button>
        <Modal
          title="Large transfer tips"
          body={
            <div className="p-a-1">
              <Accordion {...args} items={[items[0]]} />
              <Accordion {...args} items={[items[0]]} indexOpen={0} />
              <Accordion {...args} items={items} />
            </div>
          }
          scroll={Scroll.CONTENT}
          size={Size.LARGE}
          open={open}
          footer={
            <div className="p-a-3 text-xs-center">
              <a href="/large-amounts">Learn more</a>
            </div>
          }
          onClose={() => setOpen(false)}
        />
      </>
    );
  },
};