import gradio as gr

from theme import Seafoam

seafoam = Seafoam()
with open('achievement.html', 'r', encoding='utf-8') as file:
    html = file.read()


html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html

    # border: 10px solid;
    # border-image-source: linear-gradient(45deg, #8c8c8c, #f2f2f2, #8c8c8c, #f2f2f2);
    # border-image-slice: 1;
    # border-image-width: 10px;
    # border-image-repeat: round;
    # padding: 20px;
    # width: 200px;
    # height: 200px;
    # display: flex;
    # align-items: center;
    # justify-content: center;
    # background-color: #f2f2f2;
    # box-shadow: 0 0 10px rgba(0,0,0,0.3);

css="""

#user_avatar {
    background-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: #fff !important;
}

#user_avatar > div > img {
}

#user_avatar_description h1{
    font-size: 2.5rem;
    text-align: center;
}

#pet_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#badge_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_description h1{
    font-size: 2rem;
    text-align: center;
}

#achievement_log {
    margin: 2.5rem auto 0 auto;
}

#pet_gallery .grid-wrap button  {
    margin: .5vh;
    background: transparent !important;
    border-color: transparent !important;
    height: 150px !important;
    width: 6vh !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#pet_gallery .grid-container {
    grid-template-columns: repeat(30, minmax(6vh, 1fr));
}

#badge_gallery .grid-wrap button {
    margin: .5vh;
    height: 150px !important;
    width: 10vh !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); 
}
    
::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

[data-testid="block-label"] {
    opacity: 0;
}
"""

# start of gradio interface
with gr.Blocks(theme=seafoam, css=css) as demo:

    with gr.Row():
        with gr.Column(scale=1,):
            pet_gallery = gr.Gallery(['partner1.png', 'partner2.png', 'partner3.png', 'partner4.png'] * 2, label="夥伴", preview=False, elem_id='pet_gallery', columns=30, height=200)
            pet_description = gr.Markdown('# 夥伴', elem_id='pet_avatar_description')

            badge_gallery = gr.Gallery(['badge.png', 'badge2.png', 'badge3.png', 'badge4.png'] * 2, label="徽章", preview=False, elem_id='badge_gallery', columns=30, height=200)
            badge_description = gr.Markdown('# 徽章', elem_id='badge_avatar_description')
        with gr.Column(scale=1):
            avatar = gr.Gallery(['avatar.png', 'avatar2.png'], preview=True, elem_id='user_avatar')
            avatar_description = gr.Markdown('# 光束守護者', elem_id='user_avatar_description')
        with gr.Column(scale=1):
            description = gr.Markdown('# 冒險階段', elem_id='adventure_description')

            with open('progress_bar.html', 'r', encoding='utf-8') as file:
                progress_bar_html = file.read()
                progress_bar_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + progress_bar_html
            progress_bar = gr.HTML(progress_bar_html,)

            with open('stage_desc.html', 'r', encoding='utf-8') as file:
                stage_desc_html = file.read()
                stage_desc_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + stage_desc_html
            stage_desc = gr.HTML(stage_desc_html,)
    with gr.Row():
        f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")

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