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

import Card from '.';

type Story = StoryObj<typeof Card>;

/**
 * ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
 *
 * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
 */
const meta: Meta<typeof Card> = {
  component: Card,
  title: 'Layouts/Card',
  tags: ['deprecated'],
  args: {
    title: 'A card',
    details: 'Some details about this card',
    children: 'Lorem ipsum dolor sit amet.',
    onClick: fn(),
    as: 'div',
  },
};

export default meta;

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)}
        />
      </>
    );
  },
};