import createApi from '../../../stubs/tree-api-generator'
import { type ColumnInterface } from '../DefaultTableInterfaces'
import type { NodeItemExtended } from '../composables/useNodes'
import TreeTable from './TreeTable.vue'

export default {
  title: 'The Design system/Tables/Tree table',
  component: TreeTable,
  tags: ['autodocs'],
  args: {
    cacheKey: 'tableSettings',
    canHideAll: true,
    isExpandRowButton: true,
    sortFieldKey: 'sortField',
    showSettings: true,
    showCount: true,
    disabledItems: [],
    disableBranchKey: '', // В строках это поле `is_branch_unavailable`. Если необходимо включить, то ввести это значение
    // setRowColor: (item: NodeItemExtended, index: number) => (index === 8 ? 'violet' : ''),
    setRowColor: (item: NodeItemExtended, index: number) => {
      if (item.isExpanded && item.depth === 1) {
        return '#E8E7FC'
      }

      if (item.parent && item.depth > 1) {
        return '#F6F6FF'
      }

      return ''
    },
    clearCheckedOnParamsChange: true,

    noDataText: '',
    noDataButtonClick: () => { alert('Кнопка сработала!') },
  },
  argTypes: {
    canCheck: {
      isCounterVisible: false,
      description: 'Вариант отображения чекбоксов',
      control: { type: 'radio' },
      options: ['none', 'one', 'many'],
      defaultValue: 'none',
    },
  },
}

const api = createApi({
  node: {
    count: 15,
    depth: 3,
    fields: {
      name: { type: 'cat' },
      is_branch_unavailable: { type: 'boolean' },
    },
  },
}, {
  sortFieldKey: 'sortField',
})

const api2 = createApi({
  node: {
    count: 0,
    depth: 0,
    fields: {},
  },
}, {
  sortFieldKey: 'sortField',
})

const columns: ColumnInterface[] = [
  {
    name: 'ID',
    visibleByDefault: true,
    sort: 'id',
    field: (item: any) => item.id,
    header: {
      type: 'text',
    },
  },
  {
    name: 'Название',
    visibleByDefault: true,
    sort: 'name',
    field: (item: any) => item.name,
    header: {
      type: 'TextSearch',
      searchParam: 'name',
    },
  },
  {
    name: 'Тест isExpandedRow',
    visibleByDefault: true,
    field: (item: any, col, isExpandedRow) => <>{isExpandedRow ? 'Строка развернута' : 'Строка свернута'}</>,
    header: { type: 'text' },
  },
  {
    name: 'Код (дубль названия)',
    visibleByDefault: true,
    sort: 'name',
    field: (item: any) => item.name,
    header: {
      type: 'multipleRelationSelect',
      endpoint: '/product',
      selectedParam: 'name',
    },
    width: 400,
  },
  {
    name: 'Количество',
    visibleByDefault: true,
    field: (item: any) => item.name,
    header: {
      type: 'numberSearch',
      searchParam: 'count',
    },
    width: 400,
  },
]

const dragAndDropSettings = {
  getSort: (item: any) => item.id,
  setSort: (item: any, n: number) => { item.sort = n },
  onSort: (items: any) => {
    // do something
  },
}

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="display: flex; flex-direction: column; gap: 30px;">
        <TreeTable
          api={api}
          {...args}
          title="Таблица"
          endpoint={'/node'}
          columns={columns}
          dragAndDropSorting={dragAndDropSettings}
          canCheck="many"
        />
        <TreeTable
          api={api2}
          {...args}
          title="Таблица без результатов"
          endpoint={'/node'}
          columns={[]}
          dragAndDropSorting={dragAndDropSettings}
        />
      </div>
    )
  },
})

export const Primary = Template.bind({})