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

const altRenderItem = ({ label, value }) => `<span value="${value}">${label}</span>`;

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

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

  return `
  <descope-button-selection-group
    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 ?? ''}"
    ${errorMsgIcon ? errorMessageIconAttrs : ''}
  >
    <descope-button-selection-group-item value="1">item1</descope-button-selection-group-item>
    <descope-button-selection-group-item value="2">test test test test test test test test</descope-button-selection-group-item>
    <descope-button-selection-group-item value="3">item2</descope-button-selection-group-item>
    <descope-button-selection-group-item value="4">another item</descope-button-selection-group-item>
  </descope-button-selection-group>
`;
};

export default {
  component: componentName,
  title: 'descope-button-selection-group',
  decorators: [
    (story, { args }) => {
      setTimeout(() => {
        const ele = document.querySelector('descope-button-selection-group');
        if (args.itemsSource === 'prop') {
          ele.data = args.data;
        }

        if (args.overrideRenderItem) {
          ele.renderItem = altRenderItem;
        }
      });
      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' },
    },
    ...overrideRenderItemControl,
    ...itemsSourceControl,
    ...directionControl,
    ...errorMessageIconControl,
    ...defaultValueMissingControl,
  },
};

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

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