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

import Card from '.';

type Story = StoryObj<typeof Card>;

export default {
  component: Card,
  title: 'Layouts/Card',
  args: {
    title: 'A card',
    details: 'Some details about this card',
    children: 'Lorem ipsum dolor sit amet.',
    onClick: fn(),
    as: 'div',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Card>;

export const Basic: Story = {
  render: function Render(args) {
    const [isExpanded, setIsExpanded] = useState(false);

    const handleClick = (isCurrentExpanded: boolean) => {
      setIsExpanded(isCurrentExpanded);
      args?.onClick?.(!isExpanded);
    };

    return <Card {...args} isExpanded={isExpanded} onClick={handleClick} />;
  },
};

export const Multiple: Story = {
  render: function Render(args) {
    const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);

    const handleOnCardClick = (index: number) => {
      args?.onClick?.(index !== expandedCardIndex);
      setExpandedCardIndex(index !== expandedCardIndex ? index : null);
    };

    return (
      <>
        <Card
          {...args}
          icon={<FastFlagIcon />}
          isExpanded={expandedCardIndex === 0}
          onClick={() => handleOnCardClick(0)}
        />
        <Card
          {...args}
          icon={<FastFlagIcon />}
          isExpanded={expandedCardIndex === 1}
          onClick={() => handleOnCardClick(1)}
        />
        <Card
          {...args}
          icon={<FastFlagIcon />}
          isExpanded={expandedCardIndex === 2}
          onClick={() => handleOnCardClick(2)}
        />
      </>
    );
  },
};
