import os
from jinja2 import Environment, FileSystemLoader, select_autoescape
from get_paperinfo_fromurls import get_paperinfo_fromurls
import gradio as gr

class CARDS_TEMPLATE(object):
    def __init__(self, path_to_template, template_filename):
        self.path_to_template = path_to_template
        self.template_filename = template_filename
        self.template = self._get_template()
        self.rendered_html = None

    def _get_template(self):
        env = Environment(
                    autoescape=select_autoescape(
                        enabled_extensions=('html'),
                        default_for_string=True,
                    ),
                    loader=FileSystemLoader(self.path_to_template)
                )
        return env.get_template(self.template_filename)

    def render(self, paper_details_iterator):
        self.rendered_html = self.template.render(paper_details=paper_details_iterator)

    def save_html(self, output_dir=None, output_htmlfile=None):
        with open(os.path.join(output_dir, output_htmlfile), "w") as f:
            f.write(self.rendered_html)

template_file = "htmlcard.html"
template_path = ""
card_template = CARDS_TEMPLATE(
                path_to_template = template_path,
                template_filename = template_file,
                )

CSS = """
#question input {
    font-size: 16px;
}
#url-textbox {
    padding: 0 !important;
}
#short-upload-box .w-full {
    min-height: 10rem !important;
}
/* I think something like this can be used to re-shape
 * the table
 */
/*
.gr-samples-table tr {
    display: inline;
}
.gr-samples-table .p-2 {
    width: 100px;
}
*/
#select-a-file {
    width: 100%;
}
#file-clear {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
	margin-top: 10px;
}
.gradio-container .gr-button-primary {
    background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
    border: 1px solid #B0DCCC;
    border-radius: 8px;
    color: #1B8700;
}
.gradio-container.dark button#submit-button {
    background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
    border: 1px solid #B0DCCC;
    border-radius: 8px;
    color: #1B8700
}
table.gr-samples-table tr td {
    border: none;
    outline: none;
}
table.gr-samples-table tr td:first-of-type {
    width: 0%;
}
div#short-upload-box div.absolute {
    display: none !important;
}
gradio-app > div > div > div > div.w-full > div, .gradio-app > div > div > div > div.w-full > div {
    gap: 0px 2%;
}
gradio-app div div div div.w-full, .gradio-app div div div div.w-full {
    gap: 0px;
}
gradio-app h2, .gradio-app h2 {
    padding-top: 10px;
}
#answer {
    overflow-y: scroll;
    color: white;
    background: #666;
    border-color: #666;
    font-size: 20px;
    font-weight: bold;
}
#answer span {
    color: white;
}
#answer textarea {
    color:white;
    background: #777;
    border-color: #777;
    font-size: 18px;
}
#url-error input {
    color: red;
}
"""

def create_html_card(arxiv_link):
    paper_details = get_paperinfo_fromurls(arxiv_link)
    card_template.render(paper_details_iterator=paper_details)
    return card_template.rendered_html

demo = gr.Blocks(css=CSS)
with demo:
    with gr.Row(equal_height=True):
        with gr.Column():
            with gr.Row():
                text = gr.Textbox(
                    show_label=False,
                    placeholder="URL",
                    lines=1,
                    max_lines=1,
                    elem_id="url-textbox",
                )
                button = gr.Button("Get", variant="primary")
    with gr.Row():
        card = gr.HTML()

    button.click(
        fn=create_html_card,
        inputs=[text],
        outputs=[card]
    )

demo.launch()