outwatch-test/src/main/scala/outwatchapp/components/DatatablesDemo.scala

package outwatchapp.components

import scala.annotation.unused
import scala.scalajs.js.annotation.JSExportAll
import scala.scalajs.js.annotation.JSImport

import colibri.ext.monix._
import monix.bio.Task
import monix.eval.Coeval
import monix.execution.Cancelable
import org.scalajs.dom.raw.HTMLElement
import outwatch.ManagedSubscriptions.managedElement
import typings.datatablesNet.DataTables.ColumnSettings
import typings.datatablesNet.DataTables.FunctionColumnRender
import typings.datatablesNet.DataTables.Settings
import typings.datatablesNet.datatablesNetRequire
import typings.jquery.JQuery_
import typings.jquery.{mod => $}

import scalajs.js

@js.native
@JSImport(
  "datatables.net-bs4/css/dataTables.bootstrap4.min.css",
  JSImport.Namespace
)
object DataTablesBs4Css extends js.Object
@js.native
@JSImport(
  "datatables.net-bs4/js/dataTables.bootstrap4.min.js",
  JSImport.Namespace
)
object DataTablesBs4Js extends js.Object

object DatatablesDemo {
  implicit def isJQueryDT[T](x: JQuery_[T]): typings.datatablesNet.JQuery =
    x.asInstanceOf[typings.datatablesNet.JQuery]

  datatablesNetRequire
  DataTablesBs4Css
  DataTablesBs4Js

  @unused
  private def _test(tableElement: HTMLElement) = $(tableElement)
    .DataTable(
      Settings().setColumnsVarargs(
        ColumnSettings().setData("name").setRender(nameRenderFn)
      )
    )
    .destroy()

  val nameRenderFn: FunctionColumnRender = (_data, tpe, row, d) => {
    if (tpe.toString == "display") println("Matched")
    else println("Did not match")
    // this can be done with scalatags instead
    s"""
    <div>${_data.toString.toUpperCase}</div>
    """
    // with scalatags
    // import scalatags.Text.all._
    // div(_data.toString.toUpperCase).render
  }

  @JSExportAll
  case class TestData(
      name: String,
      position: String,
      location: String,
      id: String,
      date: String,
      salary: String
  )

  val dataset = js
    .Array(
      TestData(
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800"
      ),
      TestData(
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750"
      ),
      TestData(
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000"
      ),
      TestData(
        "Cedric Kelly",
        "Senior Javascript Developer",
        "Edinburgh",
        "6224",
        "2012/03/29",
        "$433,060"
      )
    )

  //  $(document).ready(_ => $(tableElement).DataTable())

  def apply() = {
    import outwatch.dsl._
    Coeval(
      div(
        table(idAttr := "myTable")(managedElement { el =>
          val dt = $(el).DataTable(
            Settings()
              .setColumnsVarargs(
                ColumnSettings()
                  .setTitle("Name")
                  .setData("name")
                  .setRender(nameRenderFn),
                ColumnSettings().setData("position"),
                ColumnSettings().setData("location"),
                ColumnSettings().setData("id"),
                ColumnSettings().setData("date"),
                ColumnSettings().setData("salary")
              )
              .setDom("Blfrtip")
              .setData(dataset)
          )
          Cancelable { () =>
            println("Destroying")
            dt.destroy()
          }
        })
      )
    ).to[Task]
  }
}