class AddButton {

    id = "";
    html = undefined;

    constructor() {
        this.html = document.createElement('button');
        this.html.classList.add("plus");
        this.html.classList.add("round");
        this.html.appendChild(document.createTextNode("+"));
        this.id = makeid(8);
        this.html.id = this.id;
    }

    addHadler(func) {
        this.html.addEventListener("click", func);
        return this;
    }

}

class HorisontalItem {

    id = undefined;
    html = undefined;
    text = undefined;
    
    constructor(text) {
        this.text = text;
        this.html = document.createElement('div');
        this.html.classList.add("horisontal-item");
        this.html.classList.add("rounded");
        this.html.appendChild(document.createTextNode(text));
        this.id = makeid(8);
        this.html.id = this.id;
        this.html.addEventListener("click", this.remove);
    }

    remove() {
        document.getElementById(this.id).remove();
    }
}

class HorisontalBar {

    html = undefined;
    plus_id = undefined;
    elements = [];

    constructor(text, id) {
        this.html = document.createElement('div');
        this.html.classList.add("horisontal-bar");
        this.html.classList.add("input");
        this.html.classList.add("rounded");
        let label = document.createElement('p');
        label.appendChild(document.createTextNode(text))
        this.html.appendChild(label);
        const plus = new AddButton().addHadler(
            () => this.append(new HorisontalItem('test'))
        );
        this.html.appendChild(plus.html);
        this.plus_id = plus.id;
    }

    append(elem) {
        this.elements.push(elem);
        this.html.insertBefore(elem.html, document.getElementById(this.plus_id));
        return this;
    }

    json() {
        return JSON.stringify(this.elements, json_filter);
    }
}

class HorisontalImage {

    id = undefined;
    html = undefined;
    
    constructor() {
        this.html = document.createElement('div');
        this.html.classList.add("horisontal");
        this.html.classList.add("image");
        this.html.classList.add("input");
        this.html.classList.add("rounded");
        this.id = makeid(8);
        this.html.id = this.id;

        let plus = new AddButton();
        plus.addHadler(() => {
            addImage(plus.id, this.id);
            document.getElementById("screenshots").appendChild(new HorisontalImage().html);
        });
        this.html.appendChild(plus.html);
    }

    remove() {
        document.getElementById(this.id).remove();
    }
}

class HorisontalImageBar {

    html = undefined;
    first_id = undefined;
    elements = [];

    constructor(id) {
        this.html = document.createElement('div');
        this.html.classList.add("horisontal-bar");
        const first = new HorisontalImage();
        this.html.appendChild(first.html);
        this.first_id = first.id;
    }

    append(elem) {
        this.elements.push(elem);
        this.html.insertBefore(elem.html, document.getElementById(this.first_id));
        return this;
    }

    json() {
        return JSON.stringify(this.elements, json_filter);
    }
}

class ImgButton {

    html = undefined;
    id = undefined;

    constructor(name, img) {
        this.html = document.createElement('div');
        this.html.classList.add("imgbutton");
        this.id = makeid(8);
        this.html.id = this.id;

        let btn_img = document.createElement('img');
        btn_img.src = img;
        btn_img.innerHTML = name;
        this.html.appendChild(btn_img);
    }

    addHadler(func) {
        this.html.addEventListener("click", func);
        return this;
    }

    setCssClass(name) {
        this.html.classList.add(name);
    }

}

class QueueItem {

    html = undefined;
    id = undefined;

    constructor(date, name) {
        this.html = document.createElement('div');
        this.html.classList.add("queue-item");
        this.html.classList.add("horisontal-bar");
        this.html.classList.add("rounded");
        this.id = makeid(8);
        this.html.id = this.id;

        var date_p = document.createElement('p');
        date_p.innerHTML = date;
        this.html.appendChild(date_p);

        var text = document.createElement('p');
        text.classList.add("ellipsis");
        text.innerHTML = name;
        this.html.appendChild(text);

        let edit_btn = new ImgButton("Изменить", "./img/edit.svg");
        edit_btn.setCssClass("edit");
        this.html.appendChild(edit_btn.html);
        let rem_btn = new ImgButton("Удалить", "./img/delete.svg");
        rem_btn.setCssClass("remove");
        this.html.appendChild(rem_btn.html);
    }

}

class Calendar {

    html = undefined;
    id = undefined;

    constructor() {
        this.html = document.createElement('div');
        this.html.classList.add("calendar");
        this.html.classList.add("rounded");
        this.id = makeid(8);
        this.html.id = this.id;

        // Calendar Header
        let month = document.createElement('div');
        month.classList.add("month");
        let m_header = document.createElement('ul');
        let prev_btn = document.createElement('li');
        prev_btn.classList.add("prev");
        prev_btn.id = this.id + "-prev";
        prev_btn.innerHTML = "❮";
        m_header.appendChild(prev_btn);
        let next_btn = document.createElement('li');
        next_btn.classList.add("next");
        next_btn.id = this.id + "-next";
        next_btn.innerHTML = "❯";
        m_header.appendChild(next_btn);
        let month_text = document.createElement('li');
        month_text.innerHTML = "Август 2025";
        m_header.appendChild(month_text);
        month.appendChild(m_header);
        this.html.appendChild(month);

        // Week header
        let weekdays = document.createElement('ul');
        weekdays.classList.add("weekdays");
        const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
        for (const day of days) {
            let day_li = document.createElement('li');
            day_li.innerHTML = day;
            weekdays.appendChild(day_li);
        }
        this.html.appendChild(weekdays);

        let day_table = document.createElement('ul');
        day_table.classList.add("days");
        const current = 10;
        for (const day of [...Array(31).keys()]) {
            let day_li = document.createElement('li');
            if (day+1 == current) {
                let day_sp = document.createElement('span');
                day_sp.classList.add("active");
                day_sp.innerHTML = day+1;
                day_li.appendChild(day_sp);
            } else {
                day_li.innerHTML = day+1;
            }
            day_table.appendChild(day_li);
        }
        this.html.appendChild(day_table);
    }

}