from bokeh.core.properties import String, List, Int
from bokeh.models import Markup
from bokeh.util.compiler import TypeScript

TS_CODE = """
import {Markup, MarkupView} from "models/widgets/markup"
import * as p from "core/properties"
declare function $(...args: any[]): any

export class DataTablesView extends MarkupView {
    model: DataTables

    render(): void {
        super.render()

        this.el.innerHTML = this.model.text

        // Create a DataTable, https://datatables.net/reference/option/
        $(this.el).children('table').DataTable({
          autoWidth: true,
          columnDefs: [
            // For some default styling options for column text, check out this page
            // https://datatables.net/manual/styling/classes
            {"className": "dt-left", "targets": "_all"}
          ],
          order: [[2, 'desc']],
          dom: 'Bflrtip',
          paging: true,
          buttons: [
            'columnsToggle',
          ],
          drawCallback: () => {
            console.log("DataTable rendered")
          },
          pageLength: this.model.page_length,
        })
    }
}

export namespace DataTables {
    export type Attrs = p.AttrsOf<Props>

    export type Props = Markup.Props & {
        page_length: p.Property<number>
    }
}

export interface DataTables extends DataTables.Attrs {}

export class DataTables extends Markup {
    properties: DataTables.Props

    constructor(attrs?: Partial<DataTables.Attrs>) {
        super(attrs)
    }

    static init_DataTables(): void {
        this.prototype.default_view = DataTablesView

        this.define<DataTables.Props>({
            page_length: [ p.Int, 10 ],
        })
    }
}
"""

# Custom extension for creating a DataTables (https://datatables.net/) DOM
# element in Bokeh


class DataTables(Markup):
    __javascript__ = [
        "https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/fh-3.1.6/datatables.min.js"
    ]
    __css__ = [
        "https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/fh-3.1.6/datatables.min.css"
    ]
    __implementation__ = TypeScript(TS_CODE)

    page_length = Int(default=10, help="Default number of rows to show.")