import type { Meta, Story } from '@storybook/react';

import { ASSETS_URL } from '../../../consts/common';
import { ToggleButton } from './index';
import type { ToggleButtonProps } from './index';

export default {
  component: ToggleButton,
  title: 'Forms/Toggle Button (Form Tab)'
} as Meta;

const Template: Story<ToggleButtonProps> = args => <ToggleButton {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: 'Default',
  disabled: false,
  selected: false,
  value: 'fooBar'
};

export const Active = Template.bind({});
Active.args = {
  children: 'Active',
  selected: true,
  value: 'active'
};

export const Disabled = Template.bind({});
Disabled.args = {
  children: 'Disabled',
  disabled: true,
  value: 'disabled'
};

export const WithIcon = Template.bind({});
WithIcon.args = {
  children: 'With Icon',
  disabled: false,
  selected: false,
  startIconUrl: `${ASSETS_URL}/icons2/icon_help.svg`,
  value: 'helpIcon'
};