import gradio as gr
import requests
from bs4 import BeautifulSoup
import re

def search_fn(query,count):
    if count>99:
        count = 99
    page = requests.get(f"https://www.google.com/search?q={query}&num={count}")
    soup = BeautifulSoup(page.content)
    #links = soup.findAll("a")
    
    links = soup.findAll("a")
    file = open("myfile.txt", "w")

    for link in soup.find_all("a",href=re.compile("(?<=/url\?q=)(htt.*://.*)")):
        out = (re.split(":(?=http)",link["href"].replace("/url?q=","").split("&sa",1)[0]))
        out = out[0]
        rr=requests.get(f"{out}")
        x_opt = (dict(rr.headers).get("x-frame-options"))
        if x_opt == None:
            frame_l=f'<div class="container-mee"><div class="put-on-top"><a target="_blank" href="{out}">{out}</a></div><iframe class="responsive-iframe-mee" src="{out}" frameborder="3"></iframe></div>'
            file.writelines(frame_l)
        else:
            pass
      
        #print(file1.read())
        print (out)
        print(dict(rr.headers).get("x-frame-options"))

    file.close()
        
    with open("myfile.txt", "r") as file1:
        html_out = file1.read()
    out = format_t(html_out)  
    return out


def first():
    out = '''<h1>Loading'''
    return out

def test(out):
    return format_t(f'<div class="container-mee"><div class="put-on-top"><a target="_blank" href="{out}">{out}</a></div><iframe class="responsive-iframe-mee" src="{out}" frameborder="3"></iframe></div>')

def format_t(inp):

    style = '''
    .put-on-top{
    align-contents:center;
    border-style: solid;
    border-width: 3px;
    border-radius: 5px;

    background: none;
    padding: 0.5em;
    margin-top:1em;
    margin-bottom:0.3em;
    }
    .grid-mee {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: stretch;
	align-content: space-evenly;
}

    
    .container-mee {
  
  position: relative;
  overflow: hidden;
  width: 48%;
  height: 60em;
  margin-top:1em;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe-mee {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
    
}

  '''
    out = f'''<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <style>
  {style}
  </style>
  <body>
  <div class=grid-mee>
    {inp}
  </div>
  </body>
</html>'''
    return out
with gr.Blocks() as app:
    with gr.Row():
        search_box=gr.Textbox(label = "Search",scale=2)
        num_return=gr.Number(value=20, scale=1)
        search_btn=gr.Button(scale=1)
    with gr.Row():
        input = gr.Textbox(label = "URL")
        btn = gr.Button()
    output = gr.HTML("""""")

    search_btn.click(search_fn,[search_box,num_return],output)
    btn.click(first,None,output).then(test,input,output)
app.launch()