import { MultiTemplateWithPseudoStates, Template } from '../../storybook/helper.stories.templates';
import { DocumentationPage } from '../../storybook/helper.stories.docs';
import StyleDocs from '../../storybook/docs.stories.style.mdx';

import ButtonPillToggle, { ButtonPillToggleProps } from './';
import argTypes from './ButtonPillToggle.stories.args';
import Documentation from './ButtonPillToggle.stories.docs.mdx';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Momentum UI/ButtonPillToggle',
  component: ButtonPillToggle,
  parameters: {
    expanded: true,
    docs: {
      page: DocumentationPage(Documentation, StyleDocs),
    },
    args: {
      style: { margin: '0.5rem' },
    },
  },
};

const Example = Template<ButtonPillToggleProps>(ButtonPillToggle).bind({});

Example.argTypes = { ...argTypes };

Example.args = {
  children: 'Example text',
  onChange: action('onChange'),
  onPress: action('onPress'),
};

const Outline = MultiTemplateWithPseudoStates<ButtonPillToggleProps>(ButtonPillToggle).bind({});

Outline.argTypes = { ...argTypes };
delete Outline.argTypes.children;
delete Outline.argTypes.outline;
delete Outline.argTypes.isSelected;

Outline.parameters = {
  variants: [
    ...[false, true].map((isSelected) => ({
      isSelected,
      outline: true,
      label: `isSelected: ${isSelected}`,
      children: 'Example text',
    })),
  ],
};

const Ghost = MultiTemplateWithPseudoStates<ButtonPillToggleProps>(ButtonPillToggle).bind({});

Ghost.argTypes = { ...argTypes };
delete Ghost.argTypes.children;
delete Ghost.argTypes.outline;
delete Ghost.argTypes.isSelected;

Ghost.parameters = {
  variants: [
    ...[false, true].map((isSelected) => ({
      isSelected,
      ghost: true,
      label: `isSelected: ${isSelected}`,
      children: 'Example text',
    })),
  ],
};

export { Example, Outline, Ghost };