import param
import panel as pn
pn.extension(sizing_mode="stretch_width", notifications=True)
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'])

import pandas as pd

class ReactiveTables(param.Parameterized):
    
    name_ = param.String('Asian')
    record_start_index = param.Integer(1)
    record_stop_index = param.Integer(200)
    
    old_data = None
    
    @param.depends('name_', 'record_start_index', 'record_stop_index')
    def data(self):
        print('new name', self.name_)
        if len(self.name_) > 0:
            if ord(self.name_[0]) in list(range(48, 57)):
                file_name = 'num_dict.pkl'
            elif ord(self.name_[0]) in list(range(97, 122)) + list(range(65, 90)):
                file_name = f'{ord(self.name_[0])}_dict.pkl'
            else:
                file_name = 'other_dict.pkl'
        print(f'all_secret_langauge_by_fist/{file_name}')
        datas = pickle.load(open(f'all_secret_langauge_by_fist/{file_name}', 'rb'))
        
        if self.name_ in datas.keys():
            self.old_data = pd.DataFrame(datas[self.name_])
        return self.old_data, datas

    @param.depends('name_')
    def summary(self):
        return self.data()[0].describe()
    
    @param.depends('name_', 'record_start_index', 'record_stop_index')
    def table_ours(self):
        data = self.data()[0]
        return pn.pane.HTML(data[max(0, self.record_start_index):
                                        min(min(self.record_stop_index + 1, self.record_start_index + 2001), len(data))].to_html(
            classes=['example', 'panel-df']) + script, 
                                   sizing_mode='stretch_width')
    
    @param.depends('name_', 'record_start_index', 'record_stop_index')
    def notification(self):
        datas = self.data()[1]
        if datas:
            if self.name_ in datas.keys():
                return pn.pane.HTML(f'<h1>Found {self.name_}.</h1> <h2> {self.name_} has {datas[self.name_].count()} secret languages found by SecretFinding. Presenting the secret language from {self.record_start_index} to {max(self.record_stop_index, datas[self.name_].count())}.</h2>' ,
                                   sizing_mode='stretch_width')
            else:
                return pn.pane.HTML(f'<h1>Sorry. {self.name_} is not in the dictionary.</h1>' ,
                                   sizing_mode='stretch_width')
        else:
            return pn.pane.HTML('<h1>initing</h1>' ,
                                   sizing_mode='stretch_width')
    
    
    def panel(self):
        return pn.Row(
            pn.Param(self, name="Settings", width=300, sizing_mode="fixed"),
            pn.Column(
                self.notification,
                "## Description", self.summary, 
                "## Table", self.table_ours, 
                width=2000, 
#                 sizing_mode='stretch_height'
            )
            , sizing_mode="stretch_width"
        )
    
component = ReactiveTables().panel()

pn.template.FastListTemplate(site="ACL 23 Submission", title="Finding Secret Language of Language Models", 
                             main=[
                                 'This page presents all secret languages discovered by our proposed SecretFinding algorithm on three multi-sentence datasets. To ensure optimal performance of this web application, at most 2000 entries can be displayed at a time. "Name" is the word for which you want to find secret languages. "Record start index" and "record stop index" are used to indicate the start and stop of the data. ',
                                 component 
                             ]).servable()