/* eslint-disable react/jsx-child-element-spacing */

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

import ActionButton from '../actionButton/ActionButton';
import AvatarView from '../avatarView';
import Info from '../info';
import Title from '../title/Title';
import ListItem, { List } from '.';

export default {
  component: ListItem,
  title: 'Other/ListItem',
  tags: ['autodocs'],
};

const Template = ({
  title = 'Wise',
  value = 'We’re building the world’s most international account',
  ...props
}: Partial<ComponentProps<typeof ListItem>>) => {
  return <ListItem 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={<ActionButton>Share details</ActionButton>}
          />
        </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={<ActionButton onClick={() => action('clicked')}>Reveal</ActionButton>}
          />
        </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={
              <button
                type="button"
                aria-label="Copy"
                style={{ background: 'none', border: 0 }}
                onClick={() => action('clicked')}
              >
                <Documents size="24" />
              </button>
            }
          />
        </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>
  );
};
