import { Illustration } from '@wise/art';
import { fn } from 'storybook/test';
import { Size } from '../common';
import AvatarView from '../avatarView';
import Decision, { DecisionPresentation, DecisionType } from '.';

export default {
  component: Decision,
  title: 'Layouts/Decision',
  parameters: {
    docs: {
      source: { type: 'auto' },
    },
  },
};

export const Basic = function Render() {
  return (
    <Decision
      options={[
        {
          description: 'Short text test.',
          onClick: fn(),
          href: '#href1',
          media: {
            block: <Illustration name="globe" alt="" disablePadding />,
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href2',
          media: {
            block: <Illustration name="confetti" alt="" disablePadding />,
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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={DecisionPresentation.LIST_BLOCK}
      type={DecisionType.NAVIGATION}
      showMediaCircleInList
      isContainerAligned={false}
      size={Size.MEDIUM}
    />
  );
};

export const Grid = function Render() {
  return (
    <Decision
      options={[
        {
          description: 'Short text test.',
          onClick: fn(),
          href: '#href1',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href2',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href3',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href1',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href1',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href1',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          '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: fn(),
          href: '#href1',
          media: {
            block: (
              <img
                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
                alt=""
              />
            ),
            list: <AvatarView profileName="Henry Mike" />,
          },
          'aria-label': 'Click here to send money to Hank Miller.',
          title: 'Hank Miller',
        },
      ]}
      presentation={DecisionPresentation.LIST_BLOCK_GRID}
      type={DecisionType.NAVIGATION}
      size={Size.MEDIUM}
    />
  );
};