import { useState } from 'react';
import { action } from 'storybook/actions';
import { Meta } from '@storybook/react-webpack5';
import { FastFlag } from '@transferwise/icons';
import { Nudge, Title, Typography } from '..';
import CheckboxOption, { type CheckboxOptionProps } from './CheckboxOption';

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Checkbox control](?path=/docs/content-listitem-listitem-checkbox--docs)
 * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
const meta: Meta<typeof CheckboxOption> = {
  component: CheckboxOption,
  title: 'Option/CheckboxOption',
  parameters: {
    docs: {
      source: { type: 'dynamic' },
    },
  },
  tags: ['deprecated'],
};

export default meta;

const commonArgs = {
  disabled: false,
  title: 'Checkbox option',
  content: 'Normally, the button and icon are vertically centered.',
  showMediaAtAllSizes: false,
  isContainerAligned: false,
};

const renderTemplate = (args: Partial<CheckboxOptionProps> = commonArgs) => {
  const mergedArgs = { ...commonArgs, ...args };
  const [checked, setChecked] = useState(true);

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

export const Basic = (args: CheckboxOptionProps) => {
  return renderTemplate(args);
};

export const Multiple = (args: CheckboxOptionProps) => {
  return (
    <>
      {renderTemplate(args)}
      {renderTemplate(args)}
      {renderTemplate(args)}
    </>
  );
};

export const WithContainerContent = (args: CheckboxOptionProps) => (
  <>
    <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
      Choose how to pay
    </Title>
    {renderTemplate(args)}
    {renderTemplate(args)}
    {renderTemplate(args)}
    <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>
  </>
);