import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import TableIntroduction from './content/TableIntroduction.mdx';
import config from './config';

import MTable from '../../Table';

<Meta title="Table" component={MTable} />

export const TableTemplateCode = `
<m-table
  :columns="columnsExample"
  :values="valuesExample"
  :sort="sort"
  :sticky="sticky"
  :selectable="selectable"
  :tableLayout="tableLayout"
  @checked="updateValues"
  @sortUpdate="updateSort"
>
  <template #2="{ column, contents, index }">
    Custom {{ contents[index] }}
  </template>
</m-table>
`

export const TableTemplate = (arg) => ({
  props: Object.keys(config.argTypesDefault),
  components: {
    MTable
  },
  data() {
    return {
      columnsExample: [
        {
          key: 0,
          label: 'firstLabel',
          sortable: true,
          sortKey: 'first'
        },
        {
          key: 1,
          label: 'secondLabel'
        },
        {
          key: 2,
          label: 'thirdLabel',
          isCustom: true
        },
      ],
      valuesExample: [
        {
          checked: false,
          contents: [
            'firstValue1',
            'secondValue1',
            'thirdValue1',
          ]
        },
        {
          checked: false,
          contents: [
            'firstValue2',
            'secondValue2',
            'thirdValue2',
          ]
        },
      ],
      sort: ''
    }
  },
  methods: {
    updateValues(value) {
      this.valuesExample.map((element, index) => {
        this.$set(element, 'checked', value[index]);
      });
    },
    updateSort(value) {
      let currentSort = this.sort.split('-');
      let currentSortLast = currentSort.length - 1;
      if (currentSort[currentSortLast] && currentSort[currentSortLast].includes('asc')) {
        this.sort = `${value}-desc`;
      } else {
        this.sort = `${value}-asc`;
      }
    }
  },
  template: TableTemplateCode
})

# Table

<TableIntroduction />

<Anchor storyId="table--default-story"></Anchor>

## Default Table Example

export const params = {
  docs: {
    source: {
      code: `
data() {
  return {
    columns: [
      {
        key: 0,
        label: 'firstLabel',
        sortable: true,
        sortKey: 'first'
      },
      {
        key: 1,
        label: 'secondLabel'
      },
      {
        key: 2,
        label: 'thirdLabel',
        isCustom: true
      },
    ],
    values: [
      {
        checked: false,
        contents: [
          'firstValue1',
          'secondValue1',
          'thirdValue1',
        ]
      },
      {
        checked: false,
        contents: [
          'firstValue2',
          'secondValue2',
          'thirdValue2',
        ]
      },
    ],
  }
}
        ${TableTemplateCode}
      `
    }
  },
}

<Canvas>
  <Story
    name="Default"
    argTypes={config.argTypesDefault}
    parameters={params}
  >
    {TableTemplate.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Notes

There are two important props that have options. These options can determine how the table will looks like. Those props are `columns` and `values`. Outside props, there are also so many slots that can be used to customize the table. Those slots are `column.key`, `bulkAction` and `blankSlate`.

### Columns props

This props acts as a column and head of the table. This props is an Array of Objects. These Objects has a certain key and certain value that will effect many option that will shown in table. The usage example is shown on the `Default Table Example section` above.

```js
columns: [
  {
    key: [String, Number], // Must be the same with values.index so it can show the content of row correctly.
    label: [String], // Will be shown in the head of the table (<th>)
    sortable: [Boolean], // When set true, it will make the table column can be sorted
    sortKey: [String], // Key that will mark the state of current sorted column
    isCustom: [Boolean], // When set to true, it will enable the slot columns.key. The slot can customize the UI of the column on the table body
    cssClass: [String], // CSS class string to customize the class used on the head of table (<th>)
    cssStyle: [String], // CSS style string to customize the style used on the head of table (<th>)
    contentCssClass: [String], // CSS class string to customize the class used on the body of table (<td>)
    contentCssStyle: [String], // CSS style string to customize the style used on the body of table (<td>)
    tooltip: [String], // Set the content of tooltip. The tooltip will be placed on the head of table (<th>)
  },
  .
  .
  .
]
```

### Values props

This props acts as a row of table `(<td>)`. This props is an Array of Objects. The usage example is shown on the `Default Table Example section` above.

```js
`values`: [
  {
    checked: [Boolean], // If the row is selected,
    contents: [Array of String] // The Array will be iterated, and the String will be the content of the table
  },
  .
  .
  .
]
```

### `column.key` slot

`column.key` scoped slot can be used when `column.isCustom` is set to `true`. The usage example is shown on the `Default Table Example section` above.
```js
// Scoped slot #2:  Number `2` on slot-name is column.key
// column: the object of column from iterated columns props
// index: index of column from iterated columns props
<template #2="{ column, contents, index }">
  {{ Custom contents[index] }}
</template>
```

### `bulkAction` slot
When the row on table is selected more than one, it will show the bulk action header. To make this bulk action header can do some kind of action, you need to add `bulkAction` scoped slot. The usage example is shown on the `Default Table Example section` above.
```js
// Scoped slot #bulkAction
// checkedCount: the count of current checked row
// checkedRows: object with key of all index of row with value of checked status of the row
<template #bulkAction="{ checkedCount, checkedRows }"> // Number `2` on slot-name is column.key
  <div class="d-inline-block">{{ checkedCount }} records has been selected.</div>
  <button class="btn btn-secondary ml-4" @click="emit('someRejectEmit', checkedRows)">Reject All</button>
  <button class="btn btn-primary ml-3" @click="emit('someRejectEmit', checkedRows)">Approve All</button>
</template>
```

### `blankSlate` slot
When the table is empty, you can use `blankSlate` slot to show some kind of blankslate image and information of empty table.
```js
// Slot #blankSlate
<template #blankSlate">
  <img src="somekind_of_blankslate.img" />
</template>
```

export const StickyTable = (arg) => ({
  props: Object.keys(config.argTypesDefault),
  components: {
    MTable
  },
  data() {
    return {
      columnsExample: [
        {
          key: 0,
          label: 'firstLabel',
          sortable: true,
          sortKey: 'first'
        },
        {
          key: 1,
          label: 'secondLabel'
        },
        {
          key: 2,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 3,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 4,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 5,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 6,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 7,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 8,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 9,
          label: 'thirdLabel',
          isCustom: true
        },
        {
          key: 10,
          label: 'lastLabel',
          isCustom: true
        },
      ],
      valuesExample: [
        {
          checked: false,
          contents: [
            'firstValue1 is really have a long way to go',
            'secondValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'thirdValue1',
            'lastValue1',
          ]
        },
        {
          checked: false,
          contents: [
            'firstValue2',
            'secondValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'thirdValue2',
            'lastValue2',
          ]
        },
      ],
      sort: ''
    }
  },
  methods: {
    updateValues(value) {
      this.valuesExample.map((element, index) => {
        this.$set(element, 'checked', value[index]);
      });
    },
    updateSort(value) {
      let currentSort = this.sort.split('-');
      let currentSortLast = currentSort.length - 1;
      if (currentSort[currentSortLast] && currentSort[currentSortLast].includes('asc')) {
        this.sort = `${value}-desc`;
      } else {
        this.sort = `${value}-asc`;
      }
    }
  },
  template: TableTemplateCode
})

## Sticky Column Example

<Canvas>
  <Story
    name="Sticky"
    argTypes={config.argTypesDefault}
    args={{
      sticky: 'left',
    }}
  >
    {StickyTable.bind({})}
  </Story>
</Canvas>