/**
 * =================================================================
 * LİSANS BİLDİRİMİ -LGPL - LGPL-AU-EK
 * =================================================================
 * * Yazar (Original Author): Abdussamed ulutaş
 * * İzinler (Permissions):
 * ---------------------
 * Bu kod, ticari veya kişisel amaçlarla serbestçe OKUNABILIR, 
 * KOPYALANABILIR, ÇOĞALTILABILIR, DEĞIŞTIRILEBILIR ve KULLANILABILIR.
 * * * Koşul (Zorunlu Atıf Şartı - Attribution Requirement):
 * ---------------------------------------------------
 * Bu yazılımın temelindeki ANA ALGORITMA tamamen ve özgün bir şekilde değiştirilmediği sürece, 
 * "author by Abdussamed ulutaş" ifadesi kodun içerisinde MUTLAKA KORUNMALIDIR.
 * * NOT: Algoritmanın temel mantığı korunarak yapılan küçük değişiklikler, 
 * optimizasyonlar veya arayüz entegrasyonları, bu atıf ifadesinin kaldırılması için yeterli sayılmaz.
 * * * Sorumluluk Reddi (Disclaimer):
 * ----------------------------
 * Bu yazılım "olduğu gibi" (as-is) sağlanmıştır. Yazar, yazılımın kullanımından 
 * kaynaklanacak hiçbir zarardan sorumlu değildir.
 * * =================================================================
 */

// Aşağıdaki satır, atıf şartını yerine getiren zorunlu ifadedir ve kodun içinde kalmalıdır:
// 
// author by Abdussamed ulutaş
// 
// =================================================================


/*
    - Tüm dizinler herkese görünecek
    - Dizinler ve dosyalar arayüzden tekrarlanamayacak
    - Dosya ve klasör isimler aynı isimde olabilir
    - Kimse bir başkasının dosyasını ve klasörünü silemez
    
    - Yeni bir kişi bağlandığında dizin listesi eşitleniyor olacak
    - Bağlanılan kişi ayrıldığında ona ait olan tüm dosya/dizin sistemi silinecek
*/

function é(rule)
{
    if(é.element == null)
    {
        /** @type {HTMLStyleElement} */
        é.element = document.createElement("style");
        document.head.appendChild(é.element);
        /** @type {CSSStyleSheet} */
        é.sheet = é.element.sheet;
    }
    é.sheet.insertRule(rule);
}

é`html,body{
    background-color: black;
    height: 100%;
    font-size: 14px;
    > * {
        box-sizing:border-box;
    }
}`;
é`body{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 20px;
    overflow: hidden;
}`;

é`@keyframes color-transition {
    0% {
        color: #c8c8c8;
    }
    50% {
        color: #757575;
    }
    100% {
        color: #c8c8c8;
    }
}`;

/// UI

// <span class="material-icons">

const UIM = new class UI {
    constructor(){
        this.setup();
    }
    setup(){
        this.setupOutContainer();
        this.setupDirentContainer();
    }
    /** @type {JQuery} */
    container = null;
    setupOutContainer(){
        this.container = $("<div>");
        this.container.addClass("dip-fev");
        é`.dip-fev{
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.2);
            position: relative;
            border-radius: 5px;
            border: solid 1px rgba(255,255,255,0.1);
            display: flex;
            overflow: auto;
            flex-direction: column;
            flex-wrap: nowrap;
        }`;
        document.body.append(this.container.get(0));
    }
    /** @type {JQuery} */
    direntbezier = null;
    setupDirentContainer(){
        this.direntbezier = $("<div>");
        this.direntbezier.addClass("dip-bezier");
        é`.dip-bezier{
            flex: 0 0 auto;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            padding: 5px;
            & > .dip-bezier-icon{
                padding: 3px;
                animation: color-transition 1s ease-in-out infinite;
            }
            & > .dip-bezier-disk{
                color: white;
                padding: 3px;
            }
            & > .dip-bezier-object{
                color: white;
                padding: 3px 2px;
                cursor: pointer;
                border-radius: 3px;
                &:hover{
                    background-color: rgba(255,255,255,0.05);
                }
            }
            & > .dip-bezier-splitter{
                margin: 5px 2px;
                width: 1px;
                background-color: rgba(0,0,0,0.1);
            }
        }`;
        this.container.append(this.direntbezier);

        this.setupBezier("Diskim",["Resimler","Yakalamalar","Benim yakalamalarım"]);
    }
    setupBezier(disk, folders){
        let icon = $("<span>");
        icon.addClass("dip-bezier-icon material-symbols-outlined");
        icon.text("bigtop_updates");
        this.direntbezier.append(icon);

        let section = $("<div>");
        section.addClass("dip-bezier-disk");
        section.html(disk + " ://");
        this.direntbezier.append(section);

        folders.map((element, index, array) => {
            let section = $("<div>");
            section.addClass("dip-bezier-object");
            section.text(element);
            this.direntbezier.append(section);
            if(index < array.length - 1)
            {
                let sectionPadding = $("<div>");
                sectionPadding.addClass("dip-bezier-splitter");
                this.direntbezier.append(sectionPadding);
            }
        });
    }
}