import gradio as gr
from _rss_parser import rss_parser

# ====================================================================================================
# ====================================================================================================
# ====================================================================================================

def fn_display_all_news():
    # import time
    # time.sleep(9999)
    html_content = ""
    html_content += "<div id='all-news-items'>"
    for e in rss_parser():
        html_content += f"""
        <div class='news-item'>
            <div class='news-info'>
                {e['time_ago']} • {e['meta_domain']}
            </div>
            <a target='_blank' href={e['link']}>
                <p class='news-title'>
                    {e['title']}
                </p>
            </a>
            <div class='news-summary'>
                {e['summary'][:500]}
            </div>
        </div>
        """
    html_content += "</div>"
    return html_content

# ====================================================================================================
# ====================================================================================================
# ====================================================================================================

theme = gr.themes.Base(
    primary_hue="neutral",
    secondary_hue="neutral",
    neutral_hue="neutral",
    text_size="lg",
    font=[gr.themes.GoogleFont('Inter')], 
    font_mono=[gr.themes.GoogleFont('Manufacturing Consent')],
)
head = """
<link rel="icon" href="https://cdn.jsdelivr.net/gh/OneLevelStudio/CORE/STATIC/1LV_LOGO_DARK.png">
"""
# * { -ms-overflow-style: none; scrollbar-width: none; }
# *::-webkit-scrollbar { display: none; }
css = """
#huggingface-space-header { display: none !important; }
footer { display: none !important; }
body {
    overflow: hidden !important;
}
main {
    padding: 0 !important;
    max-width: 100% !important;
}
textarea {
    padding-top: 5px !important;
    padding-bottom: 6px !important;
}
.row, .column {
    gap: 0 !important;
}
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    background: transparent;
    width: 8px;
    border-radius: 999px;
}
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 50%, 0.5);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 50%, 0.9);
}
/* ---------- Desktop/Mobile Only ---------- */
.desktop-only {
    display: block;
}
@media only screen and (max-width: 1000px) {
    .desktop-only {
        display: none;
    }
}
.mobile-only {
    display: block;
}
@media only screen and (min-width: 1000px) {
    .mobile-only {
        display: none;
    }
}
/* ---------- ---------- */
#all-news-items {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow-y: scroll;
    border-left: solid 1px hsla(0, 0%, 50%, 0.0);
    border-right: solid 1px hsla(0, 0%, 50%, 0.0);
    padding: 64px 33svw;
    gap: 64px;
}
@media only screen and (max-width: 1000px) {
    #all-news-items {
        padding: 64px 16px;
    }
}
.news-item {
    border-radius: 8px;
    background: hsla(0, 0%, 100%, 0.00);
    border: solid 1px hsla(0, 0%, 100%, 0.00);
    padding: 0px;
}
.news-item a {
    padding: 0 !important;
    text-align: left !important;
}
.news-item a .news-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: white !important;
}
.news-info, .news-info * {
    font-size: 14px !important;
    color: grey !important;
}
.news-summary, .news-summary * {
    font-size: 14px !important;
    color: grey !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-align: justify;
}
.news-info {
    margin-bottom: 4px !important;
}
.news-summary {
    margin-top: 8px !important;
}
/* ---------- ---------- */
#title-the-news {
    border: none !important;
    background: transparent !important;
}
#title-the-news .top-panel,
#title-the-news .cm-gutters {
    display: none !important;
}
#title-the-news .cm-line {
    font-size: 32px;
    text-align: center;
}
.progress-text {
    display: none !important;
}
"""

# ====================================================================================================
# ====================================================================================================
# ====================================================================================================

with gr.Blocks(title="The News") as demo:
    with gr.Row():
        # with gr.Column(scale=1):
        #     gr.Markdown()
        with gr.Column(scale=1):
            gr.Code("The News", container=False, show_label=False, show_line_numbers=False, elem_id="title-the-news")
            display_all_news = gr.HTML("<div style='text-align: center; margin-top: 37svh;'>🕷 Spiders are crawling the big web 🕷<br>Please wait...</div>")
        # with gr.Column(scale=1):
        #     gr.Markdown()
    demo.load(
        fn=lambda: fn_display_all_news(),
        inputs=[],
        outputs=[display_all_news],
        show_progress="full",
    )
demo.launch(theme=theme, head=head, css=css)