class Message {
    //Важный момент что мы передадим айди, чтобы потом по этому айди можно было достать элемент
    constructor(title, body, author, id) {
        this.title = title;
        this.body = body;
        this.author = author;
        this.id = id;
    }

    //функция отображения. По сути месседж знает о принадлежащих ему ансерах. И сначала выводиться меседж а потом
    //Все ансеры ему принадлежащие. Но, в форе месседж только вызывает метод рендед у ансера, что позволяет
    //распределить это
    //Если у тебя есть HTML то просто покрываешь это все тегами и дальше читай в MessageFactory
    render() {
        let message = `-----\n${this.author}: ${this.title} \n ${this.body}\n----\n`;
        let answers = "";

        if (this.answers !== undefined) {
            this.answers.forEach(e => {
                answers += e.render() + "\n";
            });
        }
        console.log(message + answers);
        //return message + answers;
    }

    //внутри месседжа есть массив ансеров, создаем новый ансер и кладем туда
    addAnswer(answer) {
        if (this.answers === undefined) this.answers = [];
        this.answers.push(answer);
        return this.answers;
    }
}

//Очевидный и понятный метод реализации наследования
class Answer extends Message {
    //Полностью совпадает с родительским
    constructor(title, body, author, id) {
        super(title, body, author, id);
    }

    //Переопределенная реализация рендера в ансере
    render() {
        return ` | ${this.author} : ${this.body}`;
    }
}

//Класс (мы его создадим один) который занимается контролированем отображения и управляет добавлением и удалением.
//Мы можем напрямую создать и месседж и ансер, но лучше это сделать через отдельный класс который будет контролировать
//Все эти движения с созданием "напрямую" скрывается что и есть инкапсуляция
class MessageFactory {
    constructor() {
        this.m_id = 0;
        this.messages = [];

    }

    //Создали сообщение, поклали в массив
    createMessage(title, body, author) {
        this.messages.push(new Message(title, body, author, this.m_id));
        this.m_id++;
        this.render();
    }

    //Задача метода - отображать все месседжи и ансеры. Сначала должен очистить место куда вставляются данные, потом
    //запускает рендер всех месседжей (месседжи в свою очередь отрендерят ансеры)
    render() {
        this.clearHTML();
        for (let i = 0; i < this.messages.length; i++) {
            this.messages[i].render();
        }
    }

    //Тут надо найти div в который ты все пихаешь и очистить содержимое, чтобы потом покласть то что нарендерил
    clearHTML() {
        clear(); //works fine for console
        //TODO: create by yourself
    }

    //по ID ты будешь знать, когда нажмешь на определенный месседж
    addAnswerToMessage(title, body, author, id) {
        this.getMessageById(id).addAnswer(new Answer(title, body, author));
        this.m_id++;
        this.render();
    }

    //Пробегаемся по массиву месседжей, который совпал с заданым айди - наш
    getMessageById(id) {
        for (let i = 0; i < this.messages.length; i++) {
            if (this.messages[i].id === id) {
                console.log("FINDED", this.messages[i]);
                return this.messages[i];
            }
        }
        throw new Error ('ТАКОГО MESSAGE НЕ СУЩЕСТВУЕТ')
    }

}

var factory = new MessageFactory();
factory.createMessage("Hello", "Something, like description", "SirSerje");
factory.addAnswerToMessage("biatch", "not cool", "Roman", 0);
factory.addAnswerToMessage("biatch", "not cool", "Roman", 0);
factory.addAnswerToMessage("hey, dont swear", "hey, dont swear", "Roman", 0);
factory.createMessage("WTF?", "What a hell going on?", "Jiesel");
factory.createMessage("Hi there", "Im trying to run", "Tom");
factory.addAnswerToMessage("biatch", "I've spot you, man!", "Roman", 4);