import { ButtonVariantArray } from '../../../types/ButtonVariant';
import { tableData } from '../../../utils/storybook/ArgTypes';
import { getIconsBundle, hasIconsBundleBeenRegistered } from '@teliads/icons';
let iconList = [];
if (hasIconsBundleBeenRegistered()) {
  const icons = getIconsBundle();
  if (icons) {
    iconList = Object.keys(icons);
  }
}
export const argTypes = {
  'label': {
    defaultValue: 'view',
    control: { type: 'text' },
    description: 'Used to provide the label for the button',
    table: tableData('Options', 'string', '-'),
  },
  'variant': {
    name: 'Button variant {variant}',
    options: ButtonVariantArray,
    defaultValue: 'primary',
    control: { type: 'select' },
    description: 'Sets the button variant',
    table: tableData('Options', 'string', '-'),
  },
  'onClick': {
    control: { type: 'text' },
    description: 'Allows execution of a function on button "onClick" event',
    table: tableData('Options', 'function', '-'),
  },
  'full-width': {
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Set button full width, button will take up the full width of its container',
    table: tableData('Options', 'boolean', false),
  },
  'disabled': {
    name: 'Disabled {disabled}',
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Makes the text button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.',
    table: tableData('Options', 'boolean', false),
  },
  'type': {
    options: ['submit', 'button'],
    defaultValue: 'button',
    control: { type: 'select' },
    description: 'Control to set the button "type"',
    table: tableData('Options', 'string', 'submit'),
  },
  'form': {
    control: { type: 'text' },
    description: 'ID of the form this component belongs to. Should only be set If the component is not wrapped inside its form element',
    table: tableData('Helpers', 'string', '-'),
  },
  'size': {
    name: 'Component size {size}',
    options: ['sm', 'md'],
    defaultValue: 'md',
    control: { type: 'select' },
    description: 'Control for button size',
    table: tableData('Options', 'string', 'md'),
  },
  'html-autofocus': {
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Specifies that the button should have input focus when the page loads',
    table: tableData('Options', 'boolean', false),
  },
  'formaction': {
    control: { type: 'text' },
    description: 'Specifies the URL that processes the information submitted by the button',
    table: tableData('Helpers', 'string', '-'),
  },
  'formenctype': {
    control: { type: 'text' },
    description: 'Specifies how to encode the form data that is submitted',
    table: tableData('Helpers', 'string', '-'),
  },
  'formmethod': {
    control: { type: 'text' },
    description: 'Specifies the HTTP method used to submit the form',
    table: tableData('Helpers', 'string', '-'),
  },
  'formnovalidate': {
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Specifies that the form is not to be validated when it is submitted',
    table: tableData('Helpers', 'boolean', false),
  },
  'formtarget': {
    control: { type: 'text' },
    description: 'Indicated where to display the response from submitting the form',
    table: tableData('Helpers', 'string', '-'),
  },
  'name': {
    control: { type: 'text' },
    description: 'Name of the button when submitted',
    table: tableData('Options', 'string', '-'),
  },
  'iconSize': {
    name: 'Icon size',
    defaultValue: 'sm',
    control: { type: 'select' },
    options: ['sm', 'md', 'lg'],
    description: 'Control for icon size',
    table: tableData('', 'string', 'plus'),
  },
  'showLeftIcon': {
    name: 'Show left icon',
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Toggle button left side icon',
    table: tableData('', 'boolean', false),
  },
  'leftIconName': {
    name: 'Left icon name',
    defaultValue: 'plus',
    control: { type: 'select' },
    options: iconList,
    description: 'Left icon name',
    table: tableData('', 'string', 'plus'),
  },
  'showRightIcon': {
    name: 'Show right icon',
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Toggle button right side icon',
    table: tableData('', 'boolean', false),
  },
  'rightIconName': {
    name: 'Right icon name',
    defaultValue: 'plus',
    control: { type: 'select' },
    options: iconList,
    description: 'Right icon name',
    table: tableData('', 'string', 'plus'),
  },
  'iconOnly': {
    name: 'Icon only',
    defaultValue: false,
    control: { type: 'boolean' },
    description: 'Toggle icon-only mode',
    table: tableData('', 'boolean', false),
  },
  'iconOnlyIconName': {
    name: 'Icon only icon name',
    defaultValue: 'plus',
    control: { type: 'select' },
    options: iconList,
    description: 'Icon only icon name',
    table: tableData('', 'string', 'plus'),
  },
};
