if globalThis.stylFns and globalThis.stylFns['app/components/Admin/DataTable/index.styl']
  styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  styleElement.textContent = globalThis.stylFns['app/components/Admin/DataTable/index.styl']
  document.head.appendChild(styleElement)

module.exports = 
  name: 'data-table'
  props:
    data:
      type: Array
      default: -> []
    columns:
      type: Array
      default: -> []
    loading:
      type: Boolean
      default: false
    selectable:
      type: Boolean
      default: false

  data: ->
    {
      selectedItems: []
      sortField: ''
      sortDirection: 'asc'
      currentPage: 1
      pageSize: 20
      searchQuery: ''
    }

  computed:
    filteredData: ->
      if !@searchQuery
        return @data
      
      query = @searchQuery.toLowerCase()
      return @data.filter (item) =>
        @columns.some (col) =>
          value = item[col.key]
          return false unless value?
          String(value).toLowerCase().includes(query)

    sortedData: ->
      if !@sortField
        return @filteredData
      
      return @filteredData.sort (a, b) =>
        aVal = a[@sortField]
        bVal = b[@sortField]
        
        if aVal < bVal
          return @sortDirection == 'asc' ? -1 : 1
        if aVal > bVal
          return @sortDirection == 'asc' ? 1 : -1
        return 0

    paginatedData: ->
      startIndex = (@currentPage - 1) * @pageSize
      endIndex = startIndex + @pageSize
      return @sortedData.slice(startIndex, endIndex)

    totalPages: ->
      Math.ceil(@sortedData.length / @pageSize)

  methods:
    sort: (field) ->
      if @sortField == field
        @sortDirection = if @sortDirection == 'asc' then 'desc' else 'asc'
      else
        @sortField = field
        @sortDirection = 'asc'

    selectAll: (checked) ->
      if checked
        @selectedItems = [...@paginatedData]
      else
        @selectedItems = []

    selectItem: (item, checked) ->
      if checked
        @selectedItems.push(item)
      else
        @selectedItems = @selectedItems.filter (i) -> i != item

    isSelected: (item) ->
      @selectedItems.includes(item)

    editItem: (item) ->
      @$emit 'edit', item

    deleteItem: (item) ->
      if confirm('Вы уверены, что хотите удалить этот элемент?')
        @$emit 'delete', item

  render: (new Function '_ctx', '_cache', globalThis.renderFns['app/components/Admin/DataTable/index.pug'])()