{% extends 'base.html' %}

{% block css %}
<style>
    body {
        background: #212529;
        color: white;
    }
    .item {
        display: flex;
        height: 26px;    
    }
    .prefix-right {
        margin-top: 13px;
        margin-right: 5px;
        width: 10px;
        border-top: 1px solid;
    }
    .text-item {
        margin-left: 5px;
        display: flex;
        align-items: center;
    }
    .container-main {
        position: relative;
    }
    .container-folder-innder {
        margin-left: 30px;
    }
    .prefix-line {
        position: absolute;
        border-left: 1px solid;
        height: 50%;
    }

    .container-folder-collap {
        display: none;
        overflow: hidden;
    }
    .collapsible {
        cursor: pointer;
    }
    .container-collap {
        position: relative;
        border-left: 1px solid;
    }
    .container-collap-last {
        position: relative;
    }
    .container-item {
        position: relative;
        border-left: 1px solid;
    }
    .container-item-last {
        position: relative;
    }
    .folder-font {
        font-size: 12px; 
        font-weight: bold;
    }
    .file-font {
        font-size: 12px; 
    }

    a.file-item {
        color: white;
        text-decoration: none;
    }
    a.file-item:hover {
        color: antiquewhite;
    }
    .font-size-file {
        font-size: 10px;
        color: #b1b1b1;
    }
</style>
{% endblock %}
{% block content %}
    {% if error %}
        {{error}}
    {% endif %}
    <div id="main-id"></div>
{% endblock %}
{% block script %}
<script>
    const container_collap = (sub_folder) => {
        return `
            <div class="container-collap container-folder-collap">
                <div class="container-folder-innder">
                    ${sub_folder}
                </div>
            </div>
        `
    }
    const container_collap_last = (sub_folder) => {
        return `
            <div class="container-collap-last container-folder-collap">
                <div class="container-folder-innder">
                    ${sub_folder}
                </div>
            </div>
        `
    }
    const item_content = (item, isCollap) => {
        let html = item.name
        let url = item.url
        let target = ""
        if (url !== '#') target = `target="_blank"`
        if (!isCollap) html = `<a href="${url}" class="file-item" ${target}>${item.name}</a>`
        return `
            <div class="item">
                <div class="prefix-right"></div>
                ${isCollap ? generate_icon({icon_key: "folder"}) : generate_icon({file_name : item.name})}
                <div class="text-item">
                    <span class="container-text ${isCollap ? "folder-font" : "file-font"}">${html} ${isCollap ? "/" : `<span class="font-size-file"> ( ${item.size} )</span>`}</span>
                </div>
            </div>
        `
    }
    const container_item = (item, isCollap=false) => {
        return `
            <div class="container-item ${isCollap && "collapsible"}">
                ${item_content(item, isCollap)}
            </div>
        `
    }
    const container_item_last = (item, isCollap=false) => {
        return `
            <div class="container-item-last ${isCollap && "collapsible"}">
                <div class="prefix-line"></div>
                ${item_content(item, isCollap)}
            </div>
        `
    }

    const is_object_file = (obj) => {
        `
            : valid type 
            {
                "name": ... ,
                "size": ... ,
                "url": ...
            }
        `
        let list_key = ["name", "size", "url"]
        for (var i = 0; i < list_key.length; i++) {
            if (list_key[i] in obj) continue
            return false
        }
        // if ()
        return true
    }
    const recusive_gen_html = (folder) => {
        let html = ''
        let last_key = Object.keys(folder)[Object.keys(folder).length-1];
        for (const [key, value] of Object.entries(folder)) {
            if (is_object_file(value)){
                let html_item_temp = ''
                if (last_key == key){
                    html_item_temp = container_item_last(value)
                }else{
                    html_item_temp = container_item(value)
                }
                html = html + html_item_temp
            }else if (typeof(value) == "object"){
                let result = recusive_gen_html(value)
                let wrapper_collap_tmp = ''
                let html_item_temp = ''
                let temp_obj = {
                    "name": key,
                }
                if (last_key == key){
                    html_item_temp = container_item_last(temp_obj, true)
                    wrapper_collap_tmp = container_collap_last(result)
                }else{
                    html_item_temp = container_item(temp_obj, true)
                    wrapper_collap_tmp = container_collap(result)
                }
                html = html + html_item_temp + wrapper_collap_tmp
            }
        }
        return html
    }

    $(function() {
        init()
        after()
    });
    function init(){
        let folder = {{ folder_tree|safe }};
        $( "#main-id" ).html(function() {
            let result = recusive_gen_html(folder)
            let html = `<div class="container-main"><div style="margin-bottom: 5px;">Media /</div>${result}</div>`
            return html
        });
    }

    function after(){
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener("click", function() {
                this.classList.toggle("active");
                $( this ).find('i').toggleClass('bi-folder2-open bi-folder')
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        }
    }
</script>
{% endblock script %}