import BmsTable from '@/components/table/BmsTable.vue';
import BmsButton from '@/components/button/BmsButton.vue';
import BmsIconButton from '@/components/button/BmsIconButton.vue';
import { BmsTag } from '@/index';
import { Save, Trash, Pencil } from 'lucide-vue-next';

export default {
  title: 'Composants/table/Table',
  component: BmsTable,
  parameters: {
    chromatic: { disable: true },
  },
  argTypes: {
    disableSearch: {
      control: { type: 'boolean' },
    },
    selectMode: {
      options: ['single', 'default'],
    },
    mode: {
      options: ['normal', 'dense', 'small'],
    },
    loading: {
      control: { type: 'boolean' },
    },
    headers: {},
    items: {},
  },
};

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

export const Default = Template.bind({});
Default.args = {
  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: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
};

export const FiltersClosed = Template.bind({});
FiltersClosed.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',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
};

export const Small = Template.bind({});
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',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
  defaultFiltersOpened: true,
};

export const FiltersOpened = Template.bind({});
FiltersOpened.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',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
  defaultFiltersOpened: true,
};

export const Search = Template.bind({});
Search.args = {
  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: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
};

export const Dense = Template.bind({});
Dense.args = {
  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: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  mode: 'dense',
  disableSearch: true,
};

const TemplateCustomRow = (args) => ({
  components: {
    BmsTable,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsTable v-bind="args">
        <template #default="{ row }">
          <slot :row="row">
            <td>val</td>
            <td>val1</td>
          </slot>
        </template>
      </BmsTable>
    `,
});
export const CustomRow = TemplateCustomRow.bind({});
CustomRow.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
    },
    {
      col1: 'Value1',
      col2: 'Value2',
    },
  ],
  disableSearch: true,
  slotRow: true,
};

export const Loading = Template.bind({});
Loading.args = {
  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: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
  loading: true,
};

export const NoData = Template.bind({});
NoData.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  items: [],
  disableSearch: true,
  loading: false,
};

export const Pagination = Template.bind({});
Pagination.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  size: 5,
  items: [
    ...Array(69)
      .fill(0)
      .map((_, index) => ({
        col1: `Row ${index + 1} - Value1`,
        col2: 'Value2',
        col3: 'Value3',
      })),
  ],
};

export const CanSaveFilters = Template.bind({});
CanSaveFilters.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',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
  defaultFiltersOpened: true,
  canSaveFilters: true,
};

export const SavedFilters = Template.bind({});
SavedFilters.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: 'Value1',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  disableSearch: true,
  defaultFiltersOpened: true,
  canSaveFilters: true,
  savedFilters: [
    {
      id: 'filter0',
      name: 'Filter 0',
      route: 'path',
      filters: [
        {
          target: 'col1',
          value: 'Value1',
        },
      ],
    },
    {
      id: 'filter1',
      name: 'filter 1',
      icon: 'Heart',
      route: 'path',
      filters: [
        {
          target: 'col1',
          value: 'filter1',
        },
      ],
    },
    {
      id: 'filter2',
      name: 'filter 2',
      icon: 'User',
      unDeletable: true,
      route: 'path',
      filters: [
        {
          target: 'col1',
          value: 'filter2',
        },
      ],
    },
  ],
};

export const Sortable = Template.bind({});
Sortable.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
      sortable: true,
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
      sortable: true,
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
      sortable: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
};

export const SortedAsc = Template.bind({});
SortedAsc.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
      sortable: true,
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
      sortable: true,
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
      sortable: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  sort: {
    key: 'col1',
    value: 'asc',
  },
};

export const SortedDesc = Template.bind({});
SortedDesc.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
      sortable: true,
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
      sortable: true,
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
      sortable: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  sort: {
    key: 'col1',
    value: 'desc',
  },
};

export const Selectable = Template.bind({});
Selectable.args = {
  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',
    },
  ],
  selectable: true,
};

export const Selected = Template.bind({});
Selected.args = {
  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 SingleSelected = Template.bind({});
SingleSelected.args = {
  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,
  selectMode: 'single',
};
const TemplateWithSelectAction = (args) => ({
  components: {
    BmsTable,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsTable v-bind="args">
       <template #alert-action> 
          <BmsButton mode="danger">Supprimer la sélection</BmsButton>
        </template>
      </BmsTable>
    `,
});

export const SelectedWithCustomAction = TemplateWithSelectAction.bind({});
SelectedWithCustomAction.args = {
  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.args = {
  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,
};

const TemplateWithCustomActions = (args) => ({
  components: {
    BmsTable,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsTable v-bind="args">
      <template  #custom-actions>
          <BmsButton type="secondary">Custom action</BmsButton>
        </template>
      </BmsTable>
    `,
});

export const WithCustomActions = TemplateWithCustomActions.bind({});
WithCustomActions.args = {
  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: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  filters: [
    {
      label: 'Input',
      key: 'col1',
      type: 'input',
    },
    {
      label: 'Select',
      key: 'col2',
      type: 'select',
      selectOptions: [
        {
          label: 'option1',
          value: 'option1',
        },
        {
          label: 'option2',
          value: 'option2',
        },
      ],
    },
    {
      label: 'Boolean',
      key: 'col3',
      type: 'boolean',
    },
  ],
};

const TemplateActionColumn = (args) => ({
  components: {
    BmsTable,
    BmsIconButton,
    Save,
    Trash,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsTable v-bind="args">
       <template #col3="{isChildElement}"> 
        <template v-if="isChildElement">
         disabled
        </template>
        <template v-else>
          <BmsIconButton><Save/></BmsIconButton>
          <BmsIconButton mode="danger"><Trash/></BmsIconButton>
        </template>
       </template>
      </BmsTable>
    `,
});

export const WithActionColumn = TemplateActionColumn.bind({});
WithActionColumn.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column actions',
      key: 'col3',
      action: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
    },
  ],
  selectedItems: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  selectable: true,
};

export const WithActionColumnAndChildElement = TemplateActionColumn.bind({});
WithActionColumnAndChildElement.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column actions',
      key: 'col3',
      action: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
      childElement: {
        col1: 'child1',
        col2: 'child2',
        col3: 'child3',
      },
    },
    {
      col1: 'Value10',
      col2: 'Value11',
      col3: 'Value12',
    },
  ],
  selectedItems: [],
  selectable: true,
};

// Simple template for documentation
const SimpleTemplate = (args) => ({
  components: {
    BmsTable,
    BmsButton,
    BmsTag,
  },
  setup() {
    return { args };
  },
  template: `
  <BmsTable v-bind="args">
    <template v-if="args.hasCustomAction" #custom-action>
      <div style="display: flex; gap: 8px;">
        <BmsTag 
          v-for="tag in args.filterTags" 
          :key="tag.id"
          :active="tag.active"
          @click="tag.onClick"
        >
          {{ tag.label }}
        </BmsTag>
      </div>
    </template>
  </BmsTable>
  `,
});

// Common headers and items for documentation examples
const commonHeaders = [
  {
    label: 'Name',
    key: 'name',
    align: 'start',
    sortable: true,
  },
  {
    label: 'Email',
    key: 'email',
    align: 'start',
  },
  {
    label: 'Status',
    key: 'status',
    align: 'center',
  },
];

const commonItems = [
  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
  { name: 'Jane Smith', email: 'jane@example.com', status: 'Active' },
  { name: 'Bob Johnson', email: 'bob@example.com', status: 'Inactive' },
  { name: 'Alice Williams', email: 'alice@example.com', status: 'Active' },
  { name: 'Charlie Brown', email: 'charlie@example.com', status: 'Pending' },
];

// Playground with default values for documentation
export const PlaygroundTable = SimpleTemplate.bind({});
PlaygroundTable.parameters = { chromatic: { disable: true } };
PlaygroundTable.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [],
  hasCustomAction: false,
};

// Do: Table with search
export const DoWithSearch = SimpleTemplate.bind({});
DoWithSearch.parameters = { chromatic: { disable: true } };
DoWithSearch.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [],
  hasCustomAction: false,
};

// Do: Table without search
export const DoWithoutSearch = SimpleTemplate.bind({});
DoWithoutSearch.parameters = { chromatic: { disable: true } };
DoWithoutSearch.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: true,
  filters: [],
  hasCustomAction: false,
};

// Do: Table with filters
export const DoWithFilters = SimpleTemplate.bind({});
DoWithFilters.parameters = { chromatic: { disable: true } };
DoWithFilters.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [
    {
      label: 'Status',
      key: 'status',
      type: 'select',
      selectOptions: [
        { label: 'Active', value: 'Active' },
        { label: 'Inactive', value: 'Inactive' },
        { label: 'Pending', value: 'Pending' },
      ],
    },
  ],
  hasCustomAction: false,
};

// Do: Table without filters
export const DoWithoutFilters = SimpleTemplate.bind({});
DoWithoutFilters.parameters = { chromatic: { disable: true } };
DoWithoutFilters.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [],
  hasCustomAction: false,
};

// Do: Table with custom actions (filter tags)
export const DoWithCustomActions = SimpleTemplate.bind({});
DoWithCustomActions.parameters = { chromatic: { disable: true } };
DoWithCustomActions.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [],
  hasCustomAction: true,
  filterTags: [
    { id: '1', label: 'Active', active: true, onClick: () => {} },
    { id: '2', label: 'Inactive', active: false, onClick: () => {} },
    { id: '3', label: 'Pending', active: false, onClick: () => {} },
  ],
};

// Do: Table with action icons
const TemplateWithActionIcons = (args) => ({
  components: {
    BmsTable,
    BmsIconButton,
    Pencil,
    Trash,
  },
  setup() {
    return { args };
  },
  template: `
  <BmsTable v-bind="args">
    <template #actions="{ row, isChildElement }">
      <template v-if="isChildElement">
        <span style="color: var(--bms-grey-50);">No actions</span>
      </template>
      <template v-else>
        <div style="display: flex; gap: 8px;">
          <BmsIconButton><Pencil/></BmsIconButton>
          <BmsIconButton mode="danger"><Trash/></BmsIconButton>
        </div>
      </template>
    </template>
  </BmsTable>
  `,
});

export const DoWithActionIcons = TemplateWithActionIcons.bind({});
DoWithActionIcons.args = {
  headers: [
    ...commonHeaders,
    {
      label: 'Actions',
      key: 'actions',
      action: true,
    },
  ],
  items: commonItems,
  disableSearch: false,
  filters: [],
};

// Do: Table with search and filters
export const DoWithSearchAndFilters = SimpleTemplate.bind({});
DoWithSearchAndFilters.parameters = { chromatic: { disable: true } };
DoWithSearchAndFilters.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [
    {
      label: 'Status',
      key: 'status',
      type: 'select',
      selectOptions: [
        { label: 'Active', value: 'Active' },
        { label: 'Inactive', value: 'Inactive' },
        { label: 'Pending', value: 'Pending' },
      ],
    },
  ],
  hasCustomAction: false,
};

// Do: Table with search, filters and actions
export const DoWithSearchFiltersAndActions = SimpleTemplate.bind({});
DoWithSearchFiltersAndActions.parameters = { chromatic: { disable: true } };
DoWithSearchFiltersAndActions.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [
    {
      label: 'Status',
      key: 'status',
      type: 'select',
      selectOptions: [
        { label: 'Active', value: 'Active' },
        { label: 'Inactive', value: 'Inactive' },
        { label: 'Pending', value: 'Pending' },
      ],
    },
  ],
  hasCustomAction: true,
  filterTags: [
    { id: '1', label: 'Active', active: true, onClick: () => {} },
    { id: '2', label: 'Inactive', active: false, onClick: () => {} },
  ],
};

// Do: Table with row selection
export const DoWithRowSelection = SimpleTemplate.bind({});
DoWithRowSelection.parameters = { chromatic: { disable: true } };
DoWithRowSelection.args = {
  headers: commonHeaders,
  items: commonItems,
  disableSearch: false,
  filters: [],
  hasCustomAction: false,
  selectable: true,
  selectedItems: [],
};
