import gradio as gr



LABEL_BAR_FORMAT = '''
<div
    class="flex items-start justify-between font-mono text-sm leading-none group  dark:text-slate-300"
>
    <div class="flex-1" >
        <div
            class="h-1 mb-1 rounded {fill_type} bg-gradient-to-r group-hover:from-orange-500 from-orange-400 to-orange-200 dark:from-orange-400 dark:to-orange-600"
            style="width: {percentage_score}%"
        />
        <div
            class="flex items-baseline space-x-2 group-hover:text-orange-500"                                
        >
            <div class="leading-snug" style="margin-top:4px">{label_name}</div>
                <div class="flex-1 border border-dashed border-gray-100 px-4" />
                <div class="text-right ml-auto">
                    {percentage_score}%
                </div>
        </div>
    </div>
</div>
<br>
<div class="leading-snug" style="font-size: 0.8em; {desc_is_visible}">&emsp;{label_desc}</div>
<br>
<br>


'''

HTML_FORMAT = '''
<style>
.correct_style {
    background-image: linear-gradient(to right, rgba(0,150,36,1), rgba(0, 178, 72,1));
}
.correct_style:hover {
    background-image: linear-gradient(to right, rgba(0,150,36,1), rgba(0, 178, 72,0.1));
}

.incorrect_style {
    background-image: linear-gradient(to right, rgba(127,0,0,1), rgba(154, 0, 7,1));
}
.incorrect_style:hover {
    background-image: linear-gradient(to right, rgba(127,0,0,1), rgba(154, 0, 7,0.1));
}
</style>
<div class="output-label">
    <div
        class="output-class font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center dark:text-slate-200"
        >
		{heading} 
    </div>
    {LABEL_BARS}
</div>
'''

def format_labels_html(predictions, desc_is_visible = True):
    html_text = HTML_FORMAT
    if 'label' in predictions:
        x, y = len(set(predictions['preds'].keys()).intersection(predictions['label'])), len(predictions['label'])
        if y == 0:
            html_text = html_text.replace('{heading}', f'No Gold Labels Found!')
        else:
            html_text = html_text.replace('{heading}', f'{x}/{y} Correct in top 5 Predictions !')
    else:
        html_text = html_text.replace('{heading}', f'Top {len(predictions["preds"])} Labels Predicted')

    label_html_text = ""
    for i, p in enumerate(predictions['preds']):
        addn = '\n' + LABEL_BAR_FORMAT.replace('{percentage_score}', f'{int(predictions["preds"][p] * 100)}').replace('{label_name}', p)
        if 'label' in predictions:
            if p in predictions['label']:
                # print('True label encountered')
                addn = addn.replace('{fill_type}','correct_style')
            else:
                addn = addn.replace('{fill_type}','incorrect_style')
        else:
            addn = addn.replace('{fill_type}','')
        if 'descs' in predictions:
            if desc_is_visible:
                addn = addn.replace('{desc_is_visible}','')
            else:
                addn = addn.replace('{desc_is_visible}','display:none;')
            addn = addn.replace('{label_desc}',predictions['descs'][p])
        else:
            addn = addn.replace('{desc_is_visible}','display:none;')

        label_html_text+=addn
    html_text = html_text.replace('{LABEL_BARS}', label_html_text)
    # print(html_text)
    return html_text