import { componentName } from '../src/components/descope-scopes-list';
import { directionControl, sizeControl } from './commonControls';

const Template = ({
  direction,
  numberOfItems,
  descText,
  size,
  variant,
  gap,
  dataSource,
  readOnly,
  'full-width': fullWidth,
}) => `
  <descope-scopes-list
    st-host-direction="${direction || ''}"
    size=${size || ''}
    variant="${variant}"
    st-gap="${gap}px"
    readonly="${readOnly}"
    full-width="${fullWidth}"
  >
  </descope-scopes-list>
`;

export default {
  component: componentName,
  title: 'descope-scopes-list',
  decorators: [
    (story, { args }) => {
      const data = Array.from({ length: args.numberOfItems }, (_, i) => ({
        desc: `${args.descText} ${i + 1}`,
        id: `scope-${i}`,
        required: i % 2 > 0,
      }));

      setTimeout(() => {
        const ele = document.querySelector('descope-scopes-list');

        if (args.dataSource === 'attribute') {
          ele.setAttribute('data', JSON.stringify(data));
        } else {
          ele.data = data;
        }
      });

      return story();
    },
  ],
  argTypes: {
    ...directionControl,
    ...sizeControl,
    variant: {
      name: 'Variant',
      options: ['checkbox', 'switch'],
      control: { type: 'radio' },
    },
    gap: {
      name: 'Gap',
      control: { type: 'range', min: 0, max: 30, step: 1 },
    },
    dataSource: {
      name: 'Data source',
      options: ['attribute', 'parameter'],
      control: { type: 'radio' },
    },
  },
};

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

Default.args = {
  size: 'sm',
  numberOfItems: 10,
  descText: 'Sample scope',
  dataSource: 'attribute',
  variant: 'checkbox',
  gap: 10,
  readOnly: false,
  'full-width': false,
};
