import { componentName } from '../src/components/descope-radio-group';
import {
  sizeControl,
  labelControl,
  requiredControl,
  readOnlyControl,
  helperTextControl,
  disabledControl,
  errorMissingValueControl,
  fullWidthControl,
  directionControl,
  overrideRenderItemControl,
  itemsSourceControl,
  errorMessageIconAttrs,
  errorMessageIconControl,
  defaultValueMissingControl,
} from './commonControls';
import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';

const Template = ({
  size,
  label,
  required,
  readonly,
  'full-width': fullWidth,
  direction,
  disabled,
  'helper-text': helperText,
  'default-value': defaultValue,
  'data-errormessage-value-missing': customErrorMissingValue,
  data,
  itemsSource,
  'allow-deselect': allowDeselect,
  layout,
  buttonsRowGap,
  buttonsColumnGap,
  errorMsgIcon,
}) => {
  let serializedData;

  try {
    serializedData = JSON.stringify(data);
  } catch (e) {
    // do nothing
  }

  return `
  <descope-radio-group
    layout="${layout || ''}"
    data='${(itemsSource === 'attr' && serializedData) || ''}'
    full-width="${fullWidth || false}"
    size="${size || ''}"
    label="${label || ''}"
    helper-text="${helperText || ''}"
    default-value="${defaultValue || ''}"
    required="${required || false}"
    readonly="${readonly || false}"
    disabled="${disabled || false}"
    allow-deselect="${allowDeselect || false}"
    data-errormessage-value-missing="${customErrorMissingValue || ''}"
    st-host-direction="${direction ?? ''}"
    st-buttons-row-gap="${buttonsRowGap || ''}"
    st-buttons-column-gap="${buttonsColumnGap || ''}"
    ${errorMsgIcon ? errorMessageIconAttrs : ''}
  >
    <descope-radio-button value="a" label="A">item1</descope-radio-button>
    <descope-radio-button value="b" label="B">test test test test test test test test</descope-radio-button>
    <descope-radio-button value="c" label="C">item2</descope-radio-button>
    <descope-radio-button value="d" label="D">another item</descope-radio-button>
  </descope-radio-group>
`;
};

export default {
  component: componentName,
  title: 'descope-radio-group',
  decorators: [
    (story, { args }) => {
      setTimeout(() => {
        const ele = document.querySelector('descope-radio-group');
        if (args.itemSource === 'prop') {
          ele.data = args.data;
        }
      });
      return story();
    },
    toggleDefaultErrorMessageValueMissingDecorator,
    withForm,
  ],
  argTypes: {
    ...sizeControl,
    ...labelControl,
    ...readOnlyControl,
    ...requiredControl,
    ...helperTextControl,
    ...disabledControl,
    ...errorMissingValueControl,
    ...fullWidthControl,
    'default-value': {
      name: 'Default Value',
      control: { type: 'text' },
    },
    'allow-deselect': {
      name: 'Allow Deselect',
      control: { type: 'boolean' },
    },
    readonly: {
      name: 'Read Only',
      control: { type: 'boolean' },
    },
    buttonsRowGap: {
      name: 'Vertical gap between items',
      control: { type: 'text' },
    },
    buttonsColumnGap: {
      name: 'Horizontal gap between items',
      control: { type: 'text' },
    },
    layout: {
      name: 'Layout',
      options: ['vertical', 'horizontal'],
      control: { type: 'radio' },
    },
    ...itemsSourceControl,
    ...directionControl,
    ...errorMessageIconControl,
    ...defaultValueMissingControl,
  },
};

export const Default = Template.bind({});

Default.args = {
  data: [
    { value: 'a', label: 'data item 1' },
    { value: 'b', label: 'data item 2' },
    { value: 'c', label: 'data item 3' },
    { value: 'd', label: 'data item 4' },
  ],
  itemsSource: 'children',
  'data-errormessage-value-missing': 'Please fill out this field.',
};
