import UiBmsTableRow from '@/components/table/UiBmsTableRow.vue';
import { ColumnType } from '@/models/table.model';

export default {
  title: 'Composants/table/UiBmsTableRow',
  component: UiBmsTableRow,
};

const Template = (args) => ({
  components: {
    UiBmsTableRow,
  },
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: `
  <table style="width:100%">
    <UiBmsTableRow v-bind="args">
    </UiBmsTableRow>
    </table>
  `,
});

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',
    },
  ],
  selectedItems: [],
  item: {
    col1: 'Value1',
    col2: 'Value2',
    col3: 'Value3',
  },
};

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

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',
    },
  ],
  selectedItems: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  item: {
    col1: 'Value1',
    col2: 'Value2',
    col3: 'Value3',
  },
};

export const IsChildElement = Template.bind({});
IsChildElement.args = {
  isChildElement: true,
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  selectedItems: [],
  item: {
    col1: 'Value1',
    col2: 'Value2',
    col3: 'Value3',
    childElement: {
      col1: 'child1',
      col2: 'child2',
      col3: 'child3',
    },
  },
};

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',
    },
  ],
  selectedItems: [],
  item: {
    col1: true,
    col2: '2022-01-01',
    col3: 'Value3',
  },
};
