import BmsServerTable from '@/components/table/BmsServerTable.vue';
import BmsButton from '@/components/button/BmsButton.vue';
import { SelectMode } from '@/models/table.model';
import { http, HttpResponse } from 'msw';

export default {
  title: 'Composants/table/ServerTable',
  component: BmsServerTable,
  argTypes: {
    disableSearch: {
      control: { type: 'boolean' },
    },
    headers: {},
  },
};

const mswRequestHandler = () =>
  http.get('https://fakeapi.com/items?size=25&page=0', () =>
    HttpResponse.json(
      [
        {
          col1: 'Value1',
          col2: 'Value2',
          col3: 'Value3',
        },
        {
          col1: 'Value4',
          col2: 'Value5',
          col3: 'Value6',
        },
      ],
      { headers: { 'X-Total': 4 } },
    ),
  );

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

export const Default = Template.bind({});
Default.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
Default.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  url: 'https://fakeapi.com/items',
};

export const WithFilters = Template.bind({});
WithFilters.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
WithFilters.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  filters: [
    {
      label: 'Input',
      key: 'col1',
      type: 'input',
      value: 'Val',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
  url: 'https://fakeapi.com/items',
  defaultFiltersOpened: true,
};

export const Small = Template.bind({});
Small.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
Small.args = {
  mode: 'small',
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  filters: [
    {
      label: 'Input',
      key: 'col1',
      type: 'input',
      value: 'Val',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
  url: 'https://fakeapi.com/items',
  defaultFiltersOpened: true,
};
export const WithSavedFilters = Template.bind({});
WithSavedFilters.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
WithSavedFilters.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  filters: [
    {
      label: 'Input',
      key: 'col1',
      type: 'input',
      value: 'Val',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
  url: 'https://fakeapi.com/items',
  canSaveFilters: true,
  defaultFiltersOpened: true,
  savedFilters: [
    {
      id: 'uuid',
      name: 'Saved Filter',
      route: 'path',
      filters: [
        {
          label: 'Input',
          key: 'col1',
          type: 'input',
          value: 'Val',
        },
        {
          label: 'Select',
          key: 'col2',
          type: 'select',
          selectOptions: [
            {
              label: 'option1',
              value: 'option1',
            },
            {
              label: 'option2',
              value: 'option2',
            },
          ],
        },
        {
          label: 'Boolean',
          key: 'col3',
          type: 'boolean',
        },
      ],
    },
  ],
};

export const WithCustomRequest = Template.bind({});
WithCustomRequest.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  request: () => {
    return new Promise((resolve) =>
      resolve({
        data: [
          {
            col1: 'Value1',
            col2: 'Value2',
            col3: 'Value3',
          },
          {
            col1: 'Value1',
            col2: 'Value2',
            col3: 'Value3',
          },
        ],
        total: 100,
      }),
    );
  },
};

export const Selectable = Template.bind({});
Selectable.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
Selectable.args = {
  url: 'https://fakeapi.com/items',
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  selectable: true,
};

export const Selected = Template.bind({});
Selected.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
Selected.args = {
  url: 'https://fakeapi.com/items',
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
    },
  ],
  selectedItems: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  selectable: true,
};

export const AllSelected = Template.bind({});
AllSelected.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
AllSelected.args = {
  url: 'https://fakeapi.com/items',
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
    },
  ],
  selectedItems: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
    },
  ],
  selectable: true,
  maxSelectedSize: 2,
};

export const SelectAllMode = Template.bind({});
SelectAllMode.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
SelectAllMode.args = {
  url: 'https://fakeapi.com/items',
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  selectedItems: [],
  selectMode: SelectMode.ALL,
  selectable: true,
  maxSelectedSize: 2,
  size: 2,
  page: 1,
};

const TemplateWithCustomActions = (args) => ({
  components: {
    BmsServerTable,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsServerTable v-bind="args">
      <template  #custom-actions>
          <BmsButton type="secondary">Custom action</BmsButton>
        </template>
      </BmsServerTable>
    `,
});
export const WithCustomActions = TemplateWithCustomActions.bind({});
WithCustomActions.parameters = {
  msw: {
    handlers: [mswRequestHandler()],
  },
};
WithCustomActions.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  url: 'https://fakeapi.com/items',
};
