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

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

import ActionButton from '../actionButton/ActionButton';
import Avatar from '../avatar';
import Badge from '../badge';
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={
              <Avatar>
                <img
                  style={{ width: 32, height: 32 }}
                  src="https://wise.com/public-resources/assets/balances/savings-emoji/google/✈️.png"
                  alt=""
                />
              </Avatar>
            }
          />
        </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={
              <Badge
                badge={
                  <img
                    src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
                    alt=""
                    height="24px"
                    width="24px"
                  />
                }
              >
                <Avatar type="initials" size="md">
                  <span aria-hidden>SP</span>
                </Avatar>
              </Badge>
            }
          />
        </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={
              <Badge
                badge={
                  <img
                    src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
                    alt=""
                    height="24px"
                    width="24px"
                  />
                }
              >
                <Avatar type="initials" size="md">
                  <span aria-hidden>SP</span>
                </Avatar>
              </Badge>
            }
            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>
  );
};
