import param
import panel as pn
pn.extension(sizing_mode="stretch_width")
import pickle
import pandas as pd

css = ['https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css',
       # Below: Needed for export buttons
       'https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css'
]
js = {
    '$': 'https://code.jquery.com/jquery-3.5.1.js',
    'DataTable': 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js',
    # Below: Needed for export buttons
    'buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js',
    'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js',
    'pdfmake': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js',
    'vfsfonts': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js',
    'html5buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',
}

pn.extension(css_files=css, js_files=js)

script = """
<script>
if (document.readyState === "complete") {
  $('.example').DataTable();
} else {
  $(document).ready(function () {
    $('.example').DataTable();
  })
}
</script>
"""

# html = autompg.to_html(classes=['example', 'panel-df'])


class ReactiveTables(param.Parameterized):    
    dataset = param.ObjectSelector(default='SNLI (DistillBERT)', objects=['SNLI (DistillBERT)', 'MRPC (ALBERT)', 'SQuAD (Roberta)'])
    split = param.ObjectSelector(default='train', objects=['train', 'validation or test'])
    start = param.Integer(1)
    stop = param.Integer(200)
    
    @param.depends('dataset', 'split')
    def data(self):
        _path = f'{self.dataset.split(" ")[0]}_{self.split}.pkl'
        if self.split != 'train':
            _path = _path.replace('validation or test', 'validation' if 'SQuAD' in self.dataset else 'test')
        dataframe = pickle.load(open(_path, 'rb'))
        return dataframe

    @param.depends('dataset', 'split', 'data')
    def summary(self):
        return self.data().describe()
    
#     @param.depends('data', 'stop')
#     def table(self):
#         return self.data()[self.start:self.stop]
    
    @param.depends('dataset', 'split', 'start', 'stop')
    def table_ours(self):
        return pn.pane.HTML(self.data()[self.start:self.stop + 1].to_html(classes=['example', 'panel-df']) + script, 
                                   sizing_mode='stretch_width')
    
    
    def panel(self):
        return pn.Row(
            pn.Param(self, name="Settings", width=300, sizing_mode="fixed"),
            pn.Column(
                "## Description", self.summary, 
                "## Table", self.table_ours, 
                width=2000, 
#                 sizing_mode='stretch_height'
            )
            , sizing_mode="stretch_width"
        )
    
component = ReactiveTables().panel()

# dash = 
pn.template.FastListTemplate(site="ACL 23 Submission", title="Finding Secret Language of Language Models", 
                             main=[
                                 "This page presents some secret languages discovered by our proposed SecretFinding algorithm on three multi-sentence datasets. To ensure optimal performance of this webapp, we recommend presenting less than 2000 data at a time.",
                                 component 
                             ]).servable()
# pn.serve(dash)