import gradio as gr
import xmltodict
import requests
import json
style="""
.title_div{
    font-size: x-large;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}
.card_div{
    background: #050523;
    color: white;
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
}
.frame_class{
    visibility:hidden;
    display:none;
}
"""

head = """
<script>
function run(inn) {
    console.log(inn);
    var frame_on = document.getElementById("frame" + String(inn));
    /*frame_on.style.visbility = false;*/
    frame_on.style.visbility = true;
    frame_on.style.display = true;


}
</script>
""".replace("/abs/","/pdf/")
def search(q,rn):
    api="http://export.arxiv.org/api/query?search_query=SQ&start=0&max_results=MR"
    r=requests.get(api.replace("SQ",q).replace("MR",str(rn)))
    cont=xmltodict.parse(r.content)['feed']['entry']
    html=""
    for i,c in enumerate(cont):
        pdflink=c['id'].replace('/abs/','/pdf/')
        html+=f"""<div class='card_div' id='id{i}' onclick="run({i})">"""
        html+=f"<div class='title_div'>{c['title']}</div>"
        html+=f"<div style='color:white;'>{c['summary']}</div>"
        html+=f"<div><a href='{pdflink}' target='_blank'>{pdflink}</a></div>"
        html+="</div>"
        html+=f"""<div id=frame{i} class='frame_class'><iframe src="https://docs.google.com/viewer?url={c['id'].replace('/abs/','/pdf/')}&embedded=true" frameborder="0" height="1200px" width="100%"></iframe></div>"""
    return(json.dumps(cont,indent=4)),html
with gr.Blocks(css=style,head=head) as b:
    with gr.Group():
        with gr.Row():
            query=gr.Textbox(label="Query")
            num=gr.Number(label="Count",step=1,value=10)
            sub=gr.Button()
    html_out=gr.HTML()
    json_out=gr.JSON()
    sub.click(search,[query,num],[json_out,html_out])
b.launch()