import { action } from 'storybook/actions';
import { Documents, FastFlag } from '@transferwise/icons';
import { ComponentProps } from 'react';

import { Button, IconButton, List } from '..';
import AvatarView from '../avatarView';
import Info from '../info';
import Title from '../title/Title';
import LegacyListItem from '.';

/**
 * > ⚠️ 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: LegacyListItem,
  title: 'Content/LegacyListItem',
  tags: ['deprecated'],
};

const Template = ({
  title = 'Wise',
  value = 'We’re building the world’s most international account',
  ...props
}: Partial<ComponentProps<typeof LegacyListItem>>) => {
  return <LegacyListItem title={title} value={value} {...props} />;
};

export const Basic = () => {
  return (
    <List>
      <Template />
    </List>
  );
};

export const Variants = () => {
  return (
    <div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">With Icon Avatar</Title>
        <List>
          <Template media={<AvatarView imgSrc="../tapestry-01.png" />} />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">With Contact Avatar</Title>
        <List>
          <Template
            title="Sandra Pepper"
            value="Personal account"
            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
          />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">With Avatar and Action</Title>
        <List>
          <Template
            title="Account holder"
            value="Sandra Pepper"
            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
            action={
              <Button v2 size="sm">
                Share details
              </Button>
            }
          />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">Text Only List</Title>
        <List>
          <Template title="Sort code" value="23-14-71" />
          <Template title="Account number" value="12345678" />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">Text With Action Button</Title>
        <List>
          <Template
            title="SWIFT/BIC"
            value="••• •••"
            action={
              <Button v2 size="sm" onClick={() => action('clicked')}>
                Reveal
              </Button>
            }
          />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">Text With Other Action</Title>
        <List>
          <Template
            title="Account number"
            value="123456789"
            action={
              <IconButton size={24} aria-label="Copy" priority="minimal">
                <Documents />
              </IconButton>
            }
          />
        </List>
      </div>
      <div className="m-t-4 m-b-2">
        <Title type="title-body">Text With Info Action</Title>
        <List>
          <Template
            title="Routing number"
            value="987654"
            action={
              <Info
                size="lg"
                aria-label="More information"
                content="Use this routing number to receive ACH and Wire transfers."
              />
            }
          />
        </List>
      </div>
    </div>
  );
};