import UiBmsTable from '@/components/table/UiBmsTable.vue';
import { useSort } from '@/composables/sort.composable';
import { Save, Trash } from 'lucide-vue-next';
import BmsIconButton from '@/components/button/BmsIconButton.vue';
import { computed, ref } from 'vue';
import { SortValue } from '@/models';
import { ColumnType } from '@/models/table.model';

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

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  argTypes: {
    mode: { options: ['normal', 'dense', 'small'] },
  },
  tags: ['code-only'],
  title: 'Composants/table/UiBmsTable',
  component: UiBmsTable,
};

const Template = (args) => ({
  components: {
    UiBmsTable,
  },
  setup() {
    const itemsSource = ref([...(args.items ?? [])]);
    const initialSort = {
      key: args.sort?.key ?? null,
      value: args.sort?.value ?? SortValue.default,
      overridenSortFunction: args.sort?.overridenSortFunction,
    };
    const { sort, changeSort, sortItems } = useSort(
      false,
      args.headers ?? [],
      initialSort,
    );
    const displayedItems = computed(() => sortItems([...itemsSource.value]));
    const onClickHeader = (header) => {
      changeSort(header);
    };
    return { args, sort, displayedItems, onClickHeader };
  },
  template: `
    <UiBmsTable
      v-bind="args"
      :sort="sort"
      :items="displayedItems"
      @clickHeader="onClickHeader"
    >
        <template #alert-action>
        This is a custom action
      </template>
      <template #saved-filters>
        This is a custom saved filters
      </template>
      <template #search>
        This is a custom search
      </template>
      <template #filters>
        This is a custom filter
      </template>
      <template v-if="args.slotRow" #default="{ row }">
        <slot :row="row">
          <td>Custom TD</td>
          <td>Custom TD2</td>
          <td>Custom TD3</td>
        </slot>
      </template>
      <template #pagination>
        This is a custom pagination
      </template>
    </UiBmsTable>
  `,
});

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  hasFilters: true,
  totalSize: 2,
};

export const WithHeaderTooltip = Template.bind({});
WithHeaderTooltip.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
      helperText: 'Texte d’aide affiché au survol de l’icône d’information.',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
      sortable: true,
      helperText:
        'Colonne triable : cliquer l’icône ne doit pas déclencher le tri.',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
      sortable: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value3',
      col3: 'Value5',
    },
    {
      col1: 'Value1',
      col2: 'Value4',
      col3: 'Value6',
    },
  ],
  sort: {
    key: 'col2',
    value: 'asc',
  },
  hasFilters: true,
  totalSize: 2,
};

export const CustomRows = Template.bind({});
CustomRows.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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  slotRow: true,
  totalSize: 2,
};

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  mode: 'dense',
  totalSize: 2,
};

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  loading: true,
  totalSize: 2,
};

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  totalSize: 2,
};

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  sort: {
    key: 'col1',
    value: 'desc',
  },
  totalSize: 2,
};

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: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  sort: {
    key: 'col1',
    value: 'asc',
  },
  totalSize: 2,
};

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,
  totalSize: 2,
};

export const SelectableDisabled = Template.bind({});
SelectableDisabled.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,
  selectableDisabled: true,
  totalSize: 2,
};
export const Typed = Template.bind({});
Typed.args = {
  headers: [
    {
      label: 'Column boolean',
      key: 'col1',
      align: 'start',
      columnType: ColumnType.Boolean,
    },
    {
      label: 'Column date',
      key: 'col2',
      align: 'center',
      columnType: ColumnType.Date,
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  items: [
    {
      col1: true,
      col2: '2024-10-10T12:00:00Z',
      col3: 'Value3',
    },
    {
      col1: false,
      col2: '2025-01-01T18:00:00Z',
      col3: 'Value3',
    },
  ],
  hasFilters: true,
  totalSize: 2,
};

const TemplateWithActionColumn = (args) => ({
  components: {
    UiBmsTable,
    BmsIconButton,
    Save,
    Trash,
  },
  setup() {
    return { args };
  },
  template: `
    <UiBmsTable v-bind="args">
      <template #actions="{ row }">
        <BmsIconButton> <Save/> </BmsIconButton>
        <BmsIconButton mode="danger"> <Trash/> </BmsIconButton>
      </template>
    </UiBmsTable>
  `,
});
export const WithActionColumn = TemplateWithActionColumn.bind({});
WithActionColumn.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
    {
      label: 'Actions',
      key: 'actions',
      action: true,
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value4',
      col2: 'Value5',
      col3: 'Value6',
    },
  ],
  totalSize: 2,
};
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,
  totalSize: 2,
};

export const SelectedWithMaxSelected = Template.bind({});
SelectedWithMaxSelected.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,
  totalSize: 2,
  maxSelectedSize: 1,
};

export const SingleSelect = Template.bind({});
SingleSelect.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',
  totalSize: 2,
};

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,
  totalSize: 2,
};

export const WithChildElements = Template.bind({});
WithChildElements.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      action: true,
      // align: 'end',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
      childElement: {
        col1: 'Child1',
        col2: 'Child2',
        col3: 'Child3',
      },
    },
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  hasFilters: true,
  totalSize: 2,
};
