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

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

import CheckboxOption from './CheckboxOption';

const meta: Meta<typeof CheckboxOption> = {
  component: CheckboxOption,
  title: 'Option/CheckboxOption',
  tags: ['autodocs'],
};

export default meta;

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

  return (
    <CheckboxOption
      id="checkbox-option"
      name="checkbox-option"
      checked={checked}
      disabled={disabled}
      title={title}
      content={content}
      media={<FastFlagIcon />}
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      onChange={(newValue) => setChecked(newValue)}
    />
  );
};

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

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

export const WithContainerContent = () => (
  <>
    <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>
  </>
);
