import { action } from '@storybook/addon-actions';
import { boolean, select } from '@storybook/addon-knobs';
import { Illustration } from '@wise/art';

import Avatar from '../avatar';
import { Size } from '../common';

import Decision, { DecisionPresentation, DecisionType } from '.';

export default {
  component: Decision,
  title: 'Layouts/Decision',
};

export const Basic = () => {
  const presentation = select(
    'presentation',
    DecisionPresentation,
    DecisionPresentation.LIST_BLOCK,
  );
  const disabled = boolean('disabled', false);
  const showMediaCircleInList = boolean('showMediaCircleInList', true);
  const isContainerAligned = boolean('isContainerAligned', false);
  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);

  return (
    <Decision
      options={[
        {
          description: 'Short text test.',
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: <Illustration name="globe" alt="" disablePadding />,
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click to see something',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
          onClick: action('clicked'),
          disabled,
          href: '#href2',
          media: {
            block: <Illustration name="confetti" alt="" disablePadding />,
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
        {
          description: "I'm disabled and don't require an onClick or href.",
          media: {
            block: <Illustration name="briefcase" alt="" disablePadding />,
            list: (
              <img
                src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
                alt=""
                width="100"
              />
            ),
          },
          'aria-label': 'This option is disabled.',
          disabled: true,
          title: 'Hank Miller',
        },
      ]}
      presentation={presentation}
      type={DecisionType.NAVIGATION}
      showMediaCircleInList={showMediaCircleInList}
      isContainerAligned={isContainerAligned}
      size={size}
    />
  );
};

export const grid = () => {
  const presentation = select(
    'presentation',
    DecisionPresentation,
    DecisionPresentation.LIST_BLOCK_GRID,
  );
  const disabled = boolean('disabled', false);
  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);

  return (
    <Decision
      options={[
        {
          description: 'Short text test.',
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click to see something',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
          onClick: action('clicked'),
          disabled,
          href: '#href2',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
          onClick: action('clicked'),
          href: '#href3',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          disabled,
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
        {
          description:
            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
          onClick: action('clicked'),
          href: '#href1',
          disabled,
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: (
              <Avatar size="md" type="initials">
                HM
              </Avatar>
            ),
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
      ]}
      presentation={presentation}
      type={DecisionType.NAVIGATION}
      size={size}
    />
  );
};
