import { ref } from 'vue'
import createApi from '../../../../stubs/tree-api-generator'
import ShallowTable from '../ShallowTable.vue'

import { type ColumnInterface } from '../../DefaultTableInterfaces'
import type { NodeItem, NodeItemExtended } from '../../composables/useNodes'

const api = createApi({
  node: {
    count: 15,
    depth: 3,
    fields: {
      name: { type: 'cat' },
    },
  },
}, {
  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',
    },
  },
]

const isLoading = ref(false)
const isInitialLoading = ref(false)

const items = ref<NodeItem[]>([])

const load = () => {
  isInitialLoading.value = true
  api.get('/node')
    .then(({ data }) => {
      data.results[0] = {
        ...data.results[0],

        isEmpty: false,
        children: [
          {
            id: '1 nested',
            isEmpty: false,
            name: 'First nested child',
            children: [
              {
                id: '1 nested nested',
                isEmpty: true,
                name: 'First nested in nested child',
              },
            ],
          },
        ],
      }

      items.value = data.results
    })
    .finally(() => {
      isInitialLoading.value = false
    })
}

const onChangeParams = (value: Record<string, string | string[]>) => {
  isLoading.value = true

  setTimeout(() => {
    isLoading.value = false
  }, 1000)
}

const onChangeSort = (value: string) => {
  isLoading.value = true

  setTimeout(() => {
    isLoading.value = false
  }, 1000)
}

load()

export default {
  title: 'The Design system/Tables/Shallow table',
  component: ShallowTable,
  args: {
    title: 'Таблица',
    cacheKey: 'shallowTableSettings',
    showCount: true,
    columns,
    onChangeParams,
    onChangeSort,
    // 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 ''
    },

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

const applyFilters = (items: any[], params: Record<string, string | string[]>) => {
  if (params.name) items = items.filter((i) => (i.name.indexOf(params.name) > -1))
  return items
}

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    const table = ref()
    const highlightedElements = ref<Record<string | number, string>>({})

    const setColor = (items: Array<any>, color: string) => {
      items.forEach((i) => {
        highlightedElements.value[i.id] = color
      })
      table.value.clearChecked()
    }

    return (
      <div style="width: 90vw; height: 90vh">
        <ShallowTable
          {...args}
          applyFilters={applyFilters}
          items={items.value}
          ref={table}
          columns={columns}
          highlightedElements={highlightedElements.value}
          isLoading={isLoading.value}
          isInitialLoading={isInitialLoading.value}
          actions={[
            { icon: 'attach', callback: (items: any[]) => { console.log(items) } },
            { icon: 'detach', callback: (items: any[]) => { console.log(items) } },
          ]}
        />
      </div>
    )
  },
})

export const Nodes = Template.bind({})