import { action } from '@storybook/addon-actions';
import { text, boolean } from '@storybook/addon-knobs';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';
import { useState } from 'react';

import { Nudge, Title, Typography } from '..';

import SwitchOption from './SwitchOption';

export default {
  component: SwitchOption,
  title: 'Option/SwitchOption',
};

const Template = () => {
  const [checked, setChecked] = useState(false);
  const title = text('title', 'Switch option');
  const content = text('content', 'Normally, the button and icon are vertically centered.');
  const disabled = boolean('disabled', false);
  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
  const isContainerAligned = boolean('isContainerAligned', false);

  return (
    <SwitchOption
      media={<FastFlagIcon />}
      title={title}
      content={content}
      id="id"
      checked={checked}
      complex={false}
      disabled={disabled}
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      aria-label={title}
      onChange={setChecked}
    />
  );
};

export const Basic = () => {
  return <Template />;
};

export const Multiple = () => {
  return (
    <>
      <Template />
      <Template />
      <Template />
    </>
  );
};

export const WithContainerContent = () => {
  return (
    <>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <Template />
      <Template />
      <Template />
      <div>
        <Nudge
          className="m-t-2"
          mediaName="globe"
          title="Text that is no longer than two lines."
          link="Link"
          href="#"
          onClick={action('action clicked')}
          onDismiss={action('dismissed')}
        />
      </div>
    </>
  );
};
