import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
import { http, HttpResponse } from 'msw';

export default {
  title: 'Composants/form/ServerAutocomplete',
  component: BmsServerAutocomplete,
  argTypes: {
    disableSearch: {
      control: { type: 'boolean' },
    },
    headers: {},
  },
};

const mswRequestHandler = () =>
  http.get('https://fakeapi.com/items', () =>
    HttpResponse.json([
      {
        label: 'Label 1',
        value: '1',
      },
      {
        label: 'Label 2',
        value: '2',
      },
    ]),
  );

const Template = (args) => ({
  components: {
    BmsServerAutocomplete,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsServerAutocomplete v-bind="args"/>
    <BmsServerAutocomplete v-bind="args" small/>
  `,
});

export const Default = Template.bind({});
Default.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
Default.args = {
  label: 'My autocomplete field',
  modelValue: '',
  url: 'https://fakeapi.com/items',
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My autocomplete field',
  modelValue: '',
  disabled: true,
  request: Promise.resolve([]),
};

export const Loading = Template.bind({});
Loading.args = {
  label: 'My autocomplete field',
  modelValue: '',
  request: () => {
    return new Promise((resolve) =>
      setTimeout(() => {
        resolve({
          data: [],
        });
      }, 10000),
    );
  },
};

export const WithRequest = Template.bind({});
WithRequest.args = {
  label: 'My autocomplete field',
  modelValue: '',
  request: () => {
    return new Promise((resolve) =>
      resolve({
        data: [
          {
            label: 'Label 1',
            value: '1',
          },
          {
            label: 'Label 2',
            value: '2',
          },
        ],
      }),
    );
  },
};
