import { ReactNode } from 'react';
import { Edit, Briefcase, Plane } from '@transferwise/icons';
import { fn } from 'storybook/test';
import { Flag } from '@wise/art';
import { lorem20 } from '../../test-utils';
import Link from '../../link';
import { ListItem } from '../ListItem';

export type SB_ListItem_ControlType =
  | 'non-interactive'
  | 'button'
  | 'buttonAsLink'
  | 'partialButton'
  | 'partialButtonAsLink'
  | 'iconButton'
  | 'iconButtonAsLink'
  | 'iconButtonWithLabel'
  | 'iconButtonAsLinkWithLabel'
  | 'partialIconButton'
  | 'partialIconButtonAsLink'
  | 'partialIconButtonWithLabel'
  | 'partialIconButtonAsLinkWithLabel'
  | 'navigation'
  | 'navigationAsButton'
  | 'checkbox'
  | 'radio'
  | 'switch';

export const SB_LIST_ITEM_TEXT = {
  title: 'This is a title',
  subtitle: 'And it also has a subtitle',
  valueTitle: '100 GBP',
  valueSubtitle: '200 USD',
  longTitle: `This is a long title. ${lorem20}`,
  longSubtitle: `And it also has a long subtitle. ${lorem20}`,
  longValueTitle: (
    <>
      This value title
      <br />
      is made to span
      <br />
      across few lines
    </>
  ),
};

export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
  'non-interactive': null,
  button: <ListItem.Button onClick={() => {}}>Click me</ListItem.Button>,
  buttonAsLink: <ListItem.Button href="https://wise.com">Click me</ListItem.Button>,
  partialButton: (
    <ListItem.Button partiallyInteractive onClick={() => {}}>
      Click me
    </ListItem.Button>
  ),
  partialButtonAsLink: (
    <ListItem.Button partiallyInteractive href="https://wise.com">
      Click me
    </ListItem.Button>
  ),
  navigation: <ListItem.Navigation href="https://wise.com" />,
  navigationAsButton: <ListItem.Navigation onClick={fn()} />,
  checkbox: <ListItem.Checkbox onChange={() => {}} />,
  radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
  switch: <ListItem.Switch onClick={() => {}} />,
  iconButton: (
    <ListItem.IconButton onClick={() => {}}>
      <Edit />
    </ListItem.IconButton>
  ),
  iconButtonAsLink: (
    <ListItem.IconButton href="https://wise.com">
      <Edit />
    </ListItem.IconButton>
  ),
  iconButtonWithLabel: (
    <ListItem.IconButton aria-label="Edit" onClick={() => {}}>
      <Edit />
    </ListItem.IconButton>
  ),
  iconButtonAsLinkWithLabel: (
    <ListItem.IconButton href="https://wise.com" aria-label="Edit">
      <Edit />
    </ListItem.IconButton>
  ),
  partialIconButton: (
    <ListItem.IconButton partiallyInteractive onClick={() => {}}>
      <Edit />
    </ListItem.IconButton>
  ),
  partialIconButtonAsLink: (
    <ListItem.IconButton partiallyInteractive href="https://wise.com">
      <Edit />
    </ListItem.IconButton>
  ),
  partialIconButtonWithLabel: (
    <ListItem.IconButton partiallyInteractive aria-label="Edit" onClick={() => {}}>
      <Edit />
    </ListItem.IconButton>
  ),
  partialIconButtonAsLinkWithLabel: (
    <ListItem.IconButton partiallyInteractive aria-label="Edit" href="https://wise.com">
      <Edit />
    </ListItem.IconButton>
  ),
} as const;

export const SB_LIST_ITEM_ADDITIONAL_INFO = {
  interactive: (
    <ListItem.AdditionalInfo
      action={{
        label: 'Details about the subject.',
        href: 'https://wise.com',
        target: '_blank',
      }}
    >
      Which is augmented with additional info.
    </ListItem.AdditionalInfo>
  ),
  nonInteractive: (
    <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
  ),
} as const;

export const SB_LIST_ITEM_PROMPTS = {
  interactive: (
    <ListItem.Prompt sentiment="positive">
      Finally, there is a prompt{' '}
      <Link href="https://wise.com" target="_blank" rel="noreferrer">
        referencing some details
      </Link>{' '}
      for your convenience.
    </ListItem.Prompt>
  ),
  nonInteractive: (
    <ListItem.Prompt sentiment="positive">Finally, there is a prompt.</ListItem.Prompt>
  ),
} as const;

export const SB_LIST_ITEM_MEDIA = {
  image: (
    <ListItem.Image
      alt="An illustration of a multi-currency account"
      src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
    />
  ),
  avatarFlag: (
    <ListItem.AvatarView>
      <Flag code="de" />
    </ListItem.AvatarView>
  ),
  avatarSingle: (
    <ListItem.AvatarView>
      <Briefcase />
    </ListItem.AvatarView>
  ),
  avatarDouble: <ListItem.AvatarLayout avatars={[{ asset: <Plane /> }, { asset: '7+' }]} />,
  avatarDiagonal: (
    <ListItem.AvatarLayout
      size={56}
      orientation="diagonal"
      avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="pl" /> }]}
    />
  ),
} as const;