import gradio as gr
from translator import Translator

history_list = [['', '', '']]

translator = Translator()

def translate(data):
    if data[in_selected] == 'Tiếng Việt':
        sen = data[vie_in]
        src_lang = 'vi'
    elif data[in_selected] == 'Tiếng Anh':
        sen = data[eng_in]
        src_lang = 'en'
    elif data[in_selected] == 'Tiếng Lào':
        sen = data[lao_in]
        src_lang = 'lo'
    elif data[in_selected] == 'Tiếng Trung':
        sen = data[chi_in]
        src_lang = 'zh'
    elif data[in_selected] == 'Tiếng Khơ-me':
        sen = data[kho_in]
        src_lang = 'km'

    if data[out_selected] == 'Tiếng Việt':
        tgt_lang = 'vi'
        return {vie_out: translator.translate(sen, src_lang, tgt_lang, data[models])}
    if data[out_selected] == 'Tiếng Anh':
        tgt_lang = 'en'
        return {eng_out: translator.translate(sen, src_lang, tgt_lang, data[models])}
    if data[out_selected] == 'Tiếng Lào':
        tgt_lang = 'lo'
        return {lao_out: translator.translate(sen, src_lang, tgt_lang, data[models])}
    if data[out_selected] == 'Tiếng Trung':
        tgt_lang = 'zh'
        return {chi_out: translator.translate(sen, src_lang, tgt_lang, data[models])}
    tgt_lang = 'km'
    return {kho_out: translator.translate(sen, src_lang, tgt_lang, data[models])}

def clear_all_func():
    return {vie_in: '', eng_in: '', lao_in: '', chi_in: '', kho_in: '', vie_out: '', eng_out: '', lao_out: '', chi_out: '', kho_out: ''}

def default_func():
    return {vie_in: '', eng_in: '', lao_in: '', chi_in: '', kho_in: '', models: 'Baseline'}

def set_input(data):
    if data[lang] == 'Tiếng Việt':
        return {vie_in: data[sentence]}
    elif data[lang] == 'Tiếng Anh':
        return {eng_in: data[sentence]}
    elif data[lang] == 'Tiếng Lào':
        return {lao_in: data[sentence]}
    elif data[lang] == 'Tiếng Trung':
        return {chi_in: data[sentence]}
    elif data[lang] == 'Tiếng Khơ-me':
        return {kho_in: data[sentence]}
    return {}

def add_history(data):
    if data[in_selected] == 'Tiếng Việt':
        src = data[vie_in]
    elif data[in_selected] == 'Tiếng Anh':
        src = data[eng_in]
    elif data[in_selected] == 'Tiếng Lào':
        src = data[lao_in]
    elif data[in_selected] == 'Tiếng Trung':
        src = data[chi_in]
    elif data[in_selected] == 'Tiếng Khơ-me':
        src = data[kho_in]

    if data[out_selected] == 'Tiếng Việt':
        tgt = data[vie_out]
    elif data[out_selected] == 'Tiếng Anh':
        tgt = data[eng_out]
    elif data[out_selected] == 'Tiếng Lào':
        tgt = data[lao_out]
    elif data[out_selected] == 'Tiếng Trung':
        tgt = data[chi_out]
    elif data[out_selected] == 'Tiếng Khơ-me':
        tgt = data[kho_out]

    if src == '':
        if len(history_list) == 1:
            return gr.Dataset(samples=history_list)
        else:
            return gr.Dataset(samples=history_list[1:])

    choice = data[models]
    history_list.append([src, tgt, choice])
    return gr.Dataset(samples=history_list[1:])

def clear_all_history_func():
    global history_list
    history_list = [['', '', '']]
    return gr.Dataset(samples=history_list)

def change_input_tab(data):
    if vie_in in data.keys():
        return 'Tiếng Việt'
    if eng_in in data.keys():
        return 'Tiếng Anh'
    if lao_in in data.keys():
        return 'Tiếng Lào'
    if chi_in in data.keys():
        return 'Tiếng Trung'
    return 'Tiếng Khơ-me'

def change_output_tab(data):
    if vie_out in data.keys():
        return 'Tiếng Việt'
    if eng_out in data.keys():
        return 'Tiếng Anh'
    if lao_out in data.keys():
        return 'Tiếng Lào'
    if chi_out in data.keys():
        return 'Tiếng Trung'
    return 'Tiếng Khơ-me'

js = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';

    var text = 'Dịch Song Ngữ';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 250);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

    return 'Animation created';
}
"""

css = """
#scrollable-content {
    max-height: 200px;
    overflow-y: auto !important;
}
#translate-bttn {
  font-size: 30px;
}

/* Hiệu ứng khi lướt chuột qua */
#translate-bttn:hover {
  background-color: #00ff00; /* Nền xanh lá */
  color: #000000;            /* Chữ đen */
}

/* Hiệu ứng khi nhấn chuột */
#translate-bttn:active {
  background-color: #008000; /* Nền xanh đậm */
  color: #000000;            /* Chữ đen */
}
"""

with gr.Blocks(js=js, css=css) as demo:
    # Tạo ra các Block
    with gr.Row(equal_height=False):
        with gr.Column(scale=20):
            with gr.Tab("Tiếng Việt") as in_vie_tab:
                vie_in = gr.Textbox(label='', lines=3)
            with gr.Tab("Tiếng Anh") as in_eng_tab:
                eng_in = gr.Textbox(label='', lines=3)
            with gr.Tab("Tiếng Lào") as in_lao_tab:
                lao_in = gr.Textbox(label='', lines=3)
            with gr.Tab("Tiếng Trung") as in_chi_tab:
                chi_in = gr.Textbox(label='', lines=3)
            with gr.Tab("Tiếng Khơ-me") as in_kho_tab:
                kho_in = gr.Textbox(label='', lines=3)
            in_selected = gr.Textbox(label='Ngôn ngữ', value='Tiếng Việt', visible=True)

            with gr.Row():
                models = gr.Radio(["Baseline", "Pretrained Model"],
                                        label="Mô hình thực hiện",
                                        value="Baseline",
                                        interactive=True,
                                        scale=10)
                trans_bttn = gr.Button('Dịch', elem_id='translate-bttn')

        with gr.Column(scale=20):
            with gr.Tab("Tiếng Việt") as out_vie_tab:
                vie_out = gr.Textbox(label='', lines=3, interactive=False)
            with gr.Tab("Tiếng Anh") as out_eng_tab:
                eng_out = gr.Textbox(label='', lines=3, interactive=False)
            with gr.Tab("Tiếng Lào") as out_lao_tab:
                lao_out = gr.Textbox(label='', lines=3, interactive=False)
            with gr.Tab("Tiếng Trung") as out_chi_tab:
                chi_out = gr.Textbox(label='', lines=3, interactive=False)
            with gr.Tab("Tiếng Khơ-me") as out_kho_tab:
                kho_out = gr.Textbox(label='', lines=3, interactive=False)
            out_selected = gr.Textbox(label='Ngôn ngữ', value='Tiếng Việt', visible=True)

            with gr.Row():
                save_history = gr.Button('Lưu lịch sử')
                clear_all_history = gr.Button('Xoá toàn bộ lịch sử')

    with gr.Row():
        default = gr.Button('Trạng thái mặc định')
        clear_all = gr.Button('Xoá tất cả')

    with gr.Row():
        lang = gr.Textbox(label='Ngôn ngữ', visible=False)
        sentence = gr.Textbox(label='Câu ví dụ', visible=False)
        examples = gr.Examples(
            examples=[
                ['Tiếng Việt', 'Tôi là ai', 'Baseline'],
                ['Tiếng Anh', 'The one who is called Kira is me', 'Baseline'],
                ['Tiếng Lào', 'ຂ້ອຍ', 'Baseline'],
                ['Tiếng Trung', '那头牛', 'Baseline'],
                ['Tiếng Khơ-me', 'អ្នកណាយំឈឺចាប់នេះ?', 'Baseline'],
                ['Tiếng Việt', '12 giờ đêm, khi những con bò lạc lối', 'Pretrained Model'],
                ['Tiếng Anh', 'I love... your mother', 'Pretrained Model'],
                ['Tiếng Lào', 'ດັ່ງທີ່ຄາດໄວ້, C-cup ຍັງບໍ່ພໍທີ່ຈະຊັກຈູງອ້າຍຂອງຂ້ອຍ', 'Pretrained Model'],
                ['Tiếng Trung', '我哥哥被 E 罩杯的东西所吸引。', 'Pretrained Model'],
                ['Tiếng Khơ-me', 'កុំមើល! វង្វេង!!', 'Pretrained Model'],
            ],
            inputs=[lang, sentence, models],
            elem_id='scrollable-content',
            label='Ví dụ',
        )

        src_sen = gr.Textbox(label='Câu nguồn', visible=False)
        tgt_sen = gr.Textbox(label='Câu mục tiêu', visible=False)
        histories = gr.Examples(
            examples=history_list,
            inputs=[src_sen, tgt_sen, models],
            elem_id='scrollable-content',
            label='Lịch sử',
            cache_examples=False
        )

    # Xử lí phần sự kiện

    ## Sự kiện nhấn nút dịch
    gr.on(
        triggers=[vie_in.submit, eng_in.submit, lao_in.submit, chi_in.submit, kho_in.submit, trans_bttn.click],
        fn=translate,
        inputs={vie_in, eng_in, lao_in, chi_in, kho_in, models, in_selected, out_selected},
        outputs=[vie_out, eng_out, lao_out, chi_out, kho_out]
    )

    ## Sự kiện chuyển tab của phần Input
    in_vie_tab.select(fn=change_input_tab,
                   inputs={vie_in},
                   outputs=[in_selected]
                   )
    in_eng_tab.select(fn=change_input_tab,
                   inputs={eng_in},
                   outputs=[in_selected]
                   )
    in_lao_tab.select(fn=change_input_tab,
                   inputs={lao_in},
                   outputs=[in_selected]
                   )
    in_chi_tab.select(fn=change_input_tab,
                   inputs={chi_in},
                   outputs=[in_selected]
                   )
    in_kho_tab.select(fn=change_input_tab,
                   inputs={kho_in},
                   outputs=[in_selected]
                   )

    ## Sự kiện ẩn chuyển tab của phần Output
    out_vie_tab.select(fn=change_output_tab,
                   inputs={vie_out},
                   outputs=[out_selected]
                   )
    out_eng_tab.select(fn=change_output_tab,
                   inputs={eng_out},
                   outputs=[out_selected]
                   )
    out_lao_tab.select(fn=change_output_tab,
                   inputs={lao_out},
                   outputs=[out_selected]
                   )
    out_chi_tab.select(fn=change_output_tab,
                   inputs={chi_out},
                   outputs=[out_selected]
                   )
    out_kho_tab.select(fn=change_output_tab,
                   inputs={kho_out},
                   outputs=[out_selected]
                   )

    ## Sự kiện nút Mặc định
    default.click(fn=default_func,
                  inputs=None,
                  outputs=[vie_in, eng_in, lao_in, chi_in, kho_in, models]
                  )

    ## Sự kiện xoá tất cả
    clear_all.click(fn=clear_all_func,
                    inputs=None,
                    outputs=[vie_in, eng_in, lao_in, chi_in, kho_in, vie_out, eng_out, lao_out, chi_out, kho_out]
                    )

    ## Sự kiện click vô Ví dụ
    sentence.change(fn=set_input,
                    inputs={lang, sentence},
                    outputs=[vie_in, eng_in, lao_in, chi_in, kho_in])

    ## Sự kiện với Lịch sử
    save_history.click(fn=add_history,
                       inputs={vie_out, eng_out, lao_out, chi_out, kho_out, vie_in, eng_in, lao_in, chi_in, kho_in, models, in_selected, out_selected},
                       outputs=histories.dataset)
    clear_all_history.click(fn=clear_all_history_func,
                            inputs=None,
                            outputs=histories.dataset)

demo.launch()