import React from 'react';
import { action } from 'storybook/actions';
import { Home as HomeIcon } from '@transferwise/icons';
import { Status } from '../common';
import { InfoPresentation } from '../info';
import Summary, { type Props as SummaryProps } from './Summary';

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
export default {
  component: Summary,
  title: 'Content/Summary',
  tags: ['deprecated'],
  argTypes: {
    title: { control: 'text' },
  },
};

export const Basic = (args: SummaryProps) => {
  const actionText = 'Change address';
  const description = '10 Downing Street, Westminster, London SW1A 2AA.';

  return (
    <ul>
      <Summary
        {...args}
        action={{
          text: actionText,
          href: '#change-address',
          'aria-label': ' Click here to change address',
        }}
        as="li"
        description={description}
        icon={<HomeIcon size={24} />}
        title="Verify your address"
        status={Status.NOT_DONE}
      />

      <Summary
        action={{
          text: 'Change address',
          href: '#change-address',
          'aria-label': ' Click here to change address',
        }}
        as="li"
        description={description}
        info={{
          title: 'You entered your address',
          content: 'Your address has been verified, no more actions are required.',
          'aria-label': 'Please click here to know more about your address update status',
          onClick: action('Summary Info clicked'),
        }}
        icon={<HomeIcon size={24} />}
        title="You verified your address"
        status={Status.DONE}
      />

      <Summary
        action={{
          text: 'Change address',
          href: '#change-address',
          'aria-label': ' Click here to change address',
        }}
        as="li"
        description={description}
        info={{
          title: 'Address verification pending',
          content:
            'Your address change is currently being processed. Please allow 48 hours for verification.',
          presentation: InfoPresentation.MODAL,
          'aria-label': 'Please click here to know more about your address update status',
          onClick: action('Summary Info clicked'),
        }}
        icon={<HomeIcon size={24} />}
        title="We’re verifying your address"
        status={Status.PENDING}
      />

      <Summary
        action={{
          text: 'Open in new tab',
          href: '#change-address',
          target: '_blank',
        }}
        as="li"
        description={description}
        icon={<HomeIcon size={24} />}
        title="We’re verifying your address"
        status={Status.PENDING}
      />

      <Summary
        action={{
          text: actionText,
          href: '#change-address',
          'aria-label': ' Click here to change address',
        }}
        as="li"
        description={description}
        title="Verify your address"
      />
    </ul>
  );
};