import BmsFilePicker from '@/components/form/BmsFilePicker.vue';

import template from '@/documentation/template_field_dependency.mdx';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  title: 'Composants/form/FilePicker',
  tags: ['with_useable_code'],
  component: BmsFilePicker,
  argTypes: {
    limit: {
      control: { type: 'number' },
    },
    modelValue: {},
  },
};

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

export const Empty = Template.bind({});
Empty.args = {
  modelValue: [],
  limit: 5,
  dragOverMessage: 'Déposer vos fichiers ici',
  dragOffMessage: 'Glissez votre fichier ici ou cliquez pour parcourir',
};

export const WithFiles = Template.bind({});
WithFiles.args = {
  limit: 5,
  modelValue: [
    {
      name: 'Name of a file',
    },
    {
      name: 'Name of a second file',
    },
  ],
};
