{/* <dap-ds-datatable id="auto"></dap-ds-datatable> */}

  const dataCount = 100
  const dataManual = () => Array.from({ length: dataCount }, (_, i) => ({
      id: i,
      title: `Title ${i}`,
      category: `Category ${i}`,
      price: 100 + i,
      rating: 4.5 + i / 10,
  }))

  const datatable = document.querySelector('dap-ds-datatable')
  datatable.data = dataManual()
  datatable.columns = [
    {
      id: 'title',
      accessorKey: 'title',
      header: 'Title',
    },
    {
      id: 'category',
      accessorKey: 'category',
      header: 'Category',
    },
    {
      id: 'price',
      accessorKey: 'price',
      header: 'Price',
    },
    {
      id: 'rating',
      accessorKey: 'rating',
      header: 'Rating',
    },
  ]

{/* <dap-ds-datatable id="auto" enableRowSelection></dap-ds-datatable> */}

  autoTable.addEventListener('dds-selection-change', event => {
    console.log(`Selected ${Object.keys(event.detail.selection).length} rows`)
  })

  {/* Set initial selection
      The key is the row id and the value is a boolean.
      If the value is true, the row is selected.
      You can change the key with the `rowKey` property on the table.
  */}
  autoTable.rowKey = 'title'
  autoTable.rowSelection = {
    'Title 1': true,
    'Title 2': true,
  }

{/* <dap-ds-datatable id="auto" enableSorting></dap-ds-datatable> */}

  const datatable = document.querySelector('dap-ds-datatable')
  datatable.enableSorting = true
  datatable.columns = [
    {
      id: 'title',
      accessorKey: 'title',
      header: 'Title',
    },
    ...
  ]   

{/* <dap-ds-datatable id="auto" manualPagination manualSorting></dap-ds-datatable> */}

  const fetchData = (table, skip, pageSize, sort, search) => {
    if (search) {
      fetch(`https://dummyjson.com/products/search?q=${search}`)
        .then(res => res.json())
        .then(data => {
            console.log(data)
            table.data = data?.products

            // Set the total number of rows to make the pager work
            table.rowCount = data.total
        })
    } else {
      fetch(
        `https://dummyjson.com/products?limit=${pageSize}&skip=${skip}${sort ? `&sortBy=${sort.id}&order=${sort.desc ? 'desc' : 'asc'} ` : ''}${search ? `&search=${search}` : ''}`,
      )
      .then(res => res.json())
      .then(data => {
          console.log(data)
          table.data = data?.products

          // Set the total number of rows to make the pager work
          table.rowCount = data.total
      })
    }
  }
    
  const pageSize = 11
  let pageIndex = 0 //page * pageSize
  datatable.manualPagination = true
  datatable.manualSorting = true

  datatable.pagination = {
    pageIndex,
    pageSize,
  }
  datatable.pageSizeOptions = [11, 12, 23]
  datatable.enableRowSelection = true
  datatable.rowSelection = {
    4: true,
    6: true,
  }

  datatable.addEventListener('dds-sorting-change', event => {
    console.log(event.detail.sorting)

    fetchData(
      datatable,
      datatable.pagination.pageSize * datatable.pagination.pageIndex,
      datatable.pagination.pageSize,
      event.detail.sorting[0],
      null,
    )
  })

  datatable.addEventListener('dds-selection-change', event => {
    console.log(event.detail.selection)
  })

  datatable.addEventListener('dds-pagination-change', event => {
    console.log(event.detail)
    pageIndex = event.detail.pagination.pageIndex

    fetchData(
      datatable,
      event.detail.pagination.pageSize * event.detail.pagination.pageIndex,
      event.detail.pagination.pageSize,
      null,
      null,
    )
  })

  fetchData(datatable, 0, 10, null, null)

import { html } from 'lit/static-html.js'

{/* <dap-ds-datatable id="auto"></dap-ds-datatable> */}

const dataCount = 100
datatable.columns = [
    {
    id: 'title',
    accessorKey: 'title',
    header: 'Title',
    cell: row => 
      html`<div>
            <dap-ds-button>
              <dap-ds-icon name="home-6-line"></dap-ds-icon>
            </dap-ds-button>
            ${row.getValue()}
          </div>`
  },
]

{/* <dap-ds-datatable id="auto"></dap-ds-datatable> */}

  table.columns = [
  {
    accessorKey: 'title',
    cell: ({ getValue, row, column, table }) => {
      const initialValue = getValue()

      const span = document.createElement('span')
      span.textContent = getValue()
      span.addEventListener('click', () => {
        const input = document.createElement('dap-ds-input')
        input.value = span.textContent
        input.addEventListener('dds-blur', () => {
          console.log('dds-blur', input.value, row, column, table)

          // optimistic update
          span.textContent = input.value
          input.replaceWith(span)

          // call the update here
          ...
        })
        input.addEventListener('dds-keydown', event => {
          if (event.detail.event.key === 'Enter') {
            input.blur()
          }
        })

        // replace the span with the edit input
        span.replaceWith(input)
        input.updateComplete.then(() => {
          console.log('input focus')
          input.focus()
        })
      })

      return span
    },
  ]

{/*import { html } from 'lit/static-html.js' */}
{/* <dap-ds-datatable id="auto" customHeader></dap-ds-datatable> */}

datatable.columns = [
  {
    id: 'title',
    accessorKey: 'title',
    disableDefaultSorting: customHeader,
    header: () => html`<dap-ds-command floatingStrategy="fixed">
          <dap-ds-button variant="clean" slot="trigger"
            >Title</dap-ds-button
          >
          <dap-ds-command-group label="Sort" exclusive>
            <dap-ds-command-item
              value="asc"
              selectable
              ?selected=${header.column.getIsSorted() === 'asc'}
              @dds-command-item-click=${() => {
                if (header.column.getIsSorted() === 'asc') {
                  header.column.clearSorting()
                } else {
                  header.column.toggleSorting(false)
                }
              }}
              >Asc</dap-ds-command-item
            >
            <dap-ds-command-item
              value="desc"
              selectable
              ?selected=${header.column.getIsSorted() === 'desc'}
              @dds-command-item-click=${() => {
                if (header.column.getIsSorted() === 'desc') {
                  header.column.clearSorting()
                } else {
                  header.column.toggleSorting(true)
                }
              }}
              >Desc</dap-ds-command-item
            >
          </dap-ds-command-group>
          <dap-ds-command-item value="hide">Hide</dap-ds-command-item>
        </dap-ds-command>`
  }
]