import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { StarFill } from '@transferwise/icons';

import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';

const meta: Meta<typeof PromoCard> = {
  component: PromoCard,
  title: 'Layouts/PromoCard',

  parameters: {
    actions: { argTypesRegex: null },
  },
};

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

export const Default: Story = {
  args: {
    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
    title: 'Digital',
    indicatorLabel: 'Free',
    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
  },
};

export const Link: Story = {
  args: {
    ...Default.args,
    href: '#',
  } as PromoCardLinkProps,
};

export const TaskCard: Story = {
  args: {
    ...Link.args,
    title: 'Add money for when you need it',
    description: 'Get ready to send and spend.',
    indicatorLabel: undefined,
    imageSource: undefined,
    onDismiss: () => {
      alert('Dismissed!');
    },
    onClick: () => {
      alert('Clicked!');
    },
    isSmall: true,
    useDisplayFont: false,
    className: 'taskCard',
  } as PromoCardLinkProps,
  decorators: [
    (Story) => (
      <div>
        <style>
          {`
          .storybook-container {
            background-color: var(--color-background-neutral);
          }
          
          .taskCard {
            background-color: var(--color-background-screen);
            position: relative;
            width: 208px;
            height: 268px;
          }
          
          .taskCard .np-Card-title {
            margin-top: var(--size-24);
          }
          
          
          .taskCard.np-Card--link:hover:not(.is-disabled, :disabled, :focus-within) {
            box-shadow: none;
            background-color: var(--color-background-screen-hover);
          }
  
          .taskCard.np-Card--link:active:not(.is-disabled, :disabled) {
            box-shadow: none;
            background-color: var(--color-background-screen-hover);
          }
        `}
        </style>
        <Story />
      </div>
    ),
  ],
};

export const TaskCardWithCustomIcon: Story = {
  args: {
    ...TaskCard.args,
    indicatorIcon: <StarFill size={24} aria-hidden="true" />,
  } as PromoCardLinkProps,
  decorators: TaskCard.decorators,
};

export const TaskCardCompleted: Story = {
  args: {
    ...TaskCard.args,
    onDismiss: undefined,
    href: undefined,
    indicatorIcon: 'check',
    className: 'taskCard taskCard--completed np-theme--personal np-theme-personal--forest-green',
  } as PromoCardLinkProps,
  decorators: TaskCard.decorators,
};

export const Check: Story = {
  args: {
    ...Default.args,
    type: 'checkbox',
  } as PromoCardCheckedProps,
};

export const DefaultChecked: Story = {
  args: {
    ...Check.args,
    defaultChecked: true,
  } as PromoCardCheckedProps,
};

export const Disabled: Story = {
  args: {
    ...Check.args,
    isDisabled: true,
  },
};

export const CustomClass: Story = {
  args: {
    ...Link.args,
    className: 'np-CustomPromoCard',
  },
  decorators: [
    (Story) => (
      <div>
        <style>
          {`
          .np-CustomPromoCard {
            --Card-background-color: var(--color-bright-yellow);
            --Card-indicator-icon-background-color: var(--color-background-neutral);
            --color-interactive-control: var(--color-primary);
          }
        `}
        </style>
        <Story />
      </div>
    ),
  ],
};