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;
}
#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: #b31b1b;
    border: 1px solid #b31b1b;
    border-radius: 8px;
    color: white;
    font-weight: bold;
}

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;
}

#htel {
    justify-content: center;
}

#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:
    gr.Markdown("# DocQuery: Document Query Engine")
    gr.Markdown(
        "DocQuery (created by [Impira](https://impira.com)) uses LayoutLMv1 fine-tuned on DocVQA, a document visual question"
        " answering dataset, as well as SQuAD, which boosts its English-language comprehension."
        " To use it, simply upload an image or PDF, type a question, and click 'submit', or "
        " click one of the examples to load them."
        " DocQuery is MIT-licensed and available on [Github](https://github.com/impira/docquery)."
    )

    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("Generate", variant="primary")
        with gr.Row():
            card = gr.HTML(elem_id="htel")

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



if __name__ == "__main__":
    demo.launch()