import BmsTableFilters from '@/components/table/BmsTableFilters.vue';
import { ref } from 'vue';

export default {
  title: 'Composants/table/TableFilters',
  component: BmsTableFilters,
  argTypes: {},
};

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

const InteractiveTemplate = (args) => ({
  components: { BmsTableFilters },
  setup() {
    const filters = ref(args.modelValue);
    return { filters };
  },
  template: `
    <BmsTableFilters v-model="filters" />
    <pre style="margin-top:1em;padding:1em;background:#f5f5f5;border-radius:4px;font-size:11px;line-height:1.5">{{ JSON.stringify(filters.map(f => ({ key: f.key, value: f.value })), null, 2) }}</pre>
  `,
});

export const Empty = Template.bind({});
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
Empty.args = {
  modelValue: [],
};

export const withFiltersDefault = Template.bind({});
withFiltersDefault.args = {
  canSaveFilters: true,
  modelValue: [
    {
      label: 'Input',
      key: 'key1',
      type: 'input',
    },
    {
      label: 'Select',
      key: 'key1',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'key3',
      type: 'boolean',
    },
    {
      label: 'Between Text',
      key: 'key4',
      type: 'betweenNumber',
    },
  ],
};

export const withComboboxFilters = InteractiveTemplate.bind({});
withComboboxFilters.args = {
  modelValue: [
    {
      label: 'Pays',
      key: 'country',
      type: 'select',
      selectOptions: [
        { label: 'France', value: 'fr' },
        { label: 'Allemagne', value: 'de' },
        { label: 'Espagne', value: 'es' },
        { label: 'Italie', value: 'it' },
      ],
    },
    {
      label: 'Actif',
      key: 'active',
      type: 'boolean',
    },
    {
      label: 'Ville',
      key: 'city',
      type: 'autocomplete',
      multiple: true,
      selectAll: true,
      autocompleteOptions: [
        { label: 'Paris', value: 'paris' },
        { label: 'Lyon', value: 'lyon' },
        { label: 'Marseille', value: 'marseille' },
        { label: 'Bordeaux', value: 'bordeaux' },
        { label: 'Toulouse', value: 'toulouse' },
        { label: 'Nantes', value: 'nantes' },
      ],
    },
    {
      label: 'Utilisateur',
      key: 'user',
      type: 'autocompleteServer',
      autocompleteRequest: async (_abortController, inputValue) => ({
        data: [
          { label: 'Alice Martin', value: 'alice' },
          { label: 'Bob Dupont', value: 'bob' },
          { label: 'Charlie Durand', value: 'charlie' },
          { label: 'Diana Prince', value: 'diana' },
        ].filter(
          (o) =>
            !inputValue ||
            o.label.toLowerCase().includes(inputValue.toLowerCase()),
        ),
      }),
    },
  ],
};

export const withFiltersSet = Template.bind({});
withFiltersSet.args = {
  canSaveFilters: true,
  modelValue: [
    {
      label: 'Input',
      key: 'key1',
      type: 'input',
      value: 'value',
    },
    {
      label: 'Select',
      key: 'key1',
      type: 'select',
      value: 'option1',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'key3',
      type: 'boolean',
      value: false,
    },
    {
      label: 'Between Date',
      key: 'key4',
      type: 'betweenDate',
      inputType: 'date',
      valueFrom: '2009-06-21',
      valueTo: '2024-06-21',
    },
    {
      label: 'Between Date Time',
      key: 'key4',
      type: 'betweenDate',
      inputType: 'datetime-local',
      valueFrom: '2009-06-21 23:50',
      valueTo: '2024-06-21 12:46',
    },
  ],
};
