import gradio as gr
import requests
from bs4 import BeautifulSoup
import re
'''
from selenium import webdriver
from bs4 import BeautifulSoup

url = 'https://www.wikipedia.org/'
driver = webdriver.Chrome()
driver.get(url)

html_page = driver.page_source
soup = BeautifulSoup(html_page, 'html.parser')
title = soup.title.string

print(title)

driver.quit()'''
def search_fn(query,count):
    if count>40:
        count = 40
    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 details_fn(query):
    link_list=[]
    page = requests.get(f"{query}")
    #links = soup.findAll("a")
    soup = BeautifulSoup(page.content, 'html.parser')
    try:
        title = soup.title.string
    except Exception as e:
        title = query
    try:
        description = soup.find('meta', attrs={'name':'description'})
        description = description['content']
    except Exception as e:
        description = title
    out = f"""
    <center><h3>{title}</h3><br>{description}</center>"""
    try:
        image_out="""
        
        <style>
        .im_container{
            background: white;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            align-content: center;
        }
        .im_each{
            background: blue;
            width: 20%;
            border-style: dashed;
            border-width: medium;
        }
        </style>
        <div class='im_container'>
        """
        images = soup.findAll('img')
        for i,img in enumerate(images):
            if not img['src'].startswith("data:"):
                im_id = f'img_{i}'
                link_list.append(img['src'])
                image_out += f"""
                <div id="img_{i}" class='im_each'>
                <img onclick="func('{img['src']}','img_{i}')" src={img['src']}>
                </div>
                """
                print (img['src'])
        format_out = f"""{image_out}</div>"""
    except Exception as e:
        format_out = "None"
        print (e)
    return out,format_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

load_js = """
    func = function(a,b) {
        console.log(a);
        console.log(b);
        var vv = document.getElementById(b);
        vv.style.border-color='red';
        return[ab];
        }
    """  



with gr.Blocks() as app:
    gr.HTML("""<h1>Interactive Social Media Card Maker</h1>""")
    gr.HTML("""<h3><b>Step 1:</b> Enter a URL with Iframe capability</h3>""")
    with gr.Row():
        search_box=gr.Textbox(label = "Enter a search topic here to find URL's",scale=2)
        num_return=gr.Number(label= "Number of URL's to return", value=20, scale=1)
        search_btn=gr.Button(value= "Search", scale=1)
    with gr.Row():
        input = gr.Textbox(label = "URL")
        btn = gr.Button("Preview")
    details = gr.HTML("""""")
    output = gr.HTML("""""")
    with gr.Row():
        inp_im=gr.Textbox(scale=1, label="Drag Image Here")
        images = gr.HTML("""""",scale=4)
    with gr.Row() as im_row:
        im_list = gr.Gallery()
        link_list=gr.Textbox()
    app.load(None,None,link_list,js=load_js)
    images.change(None,None,link_list)
    search_btn.click(search_fn,[search_box,num_return],output)
    btn.click(first,None,output).then(test,input,output).then(details_fn,input,[details,images])
app.launch()