const qestions = [
    {
        qestion: "Мой вопрос",
        variants: [
            "Вариант 1",
            "Вариант 2",
            "Вариант 3"
        ],
        correct: 0
    }
];

class Quiz extends Find.createApp() {
    constructor(qestions) {
        const root = Find.search('root');
        super(root);
        this.qestions = qestions;
    }

    init() {
        this.select('com.find.demos.quiz');
        this.setMeta();
        this.setCard();
        this.stable();
        this.createQestions();
    }

    setCard() {
        this.add([
            Find.content(
                `<div class="card">
                    <div class="card-header">
                        <p class="card-header-title">
                            <span id="title">
                                Загрузка...
                            </span>
                        </p>
                    </div>
                    <div class="card-content">
                        <div class="content" id="content"></div>
                        <button 
                            class="button" 
                            style="width: 100%;"
                            id="test"
                        >Проверить</button>
                    </div>
                </div>`
            )
        ]);
    }

    setMeta() {
        this.meta([
            Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
            Find.content('<style>body { margin: 20px; } </style>')
        ]);
    }

    createQestions() {
        this.number = 0;
        for (let i = 0; i < this.qestions.length; i ++) {
            this.select('qestion' + this.number);
            this.setTitle();
            this.render();
            this.setForms(this.qestions[i]);
            this.setEvents(this.qestions[i])
            .then((result) => {
                this.number ++;
            })
            .catch((error) => {
                    
            });
            this.number ++;
        }
    }

    setEvents() {}

    setTitle() {
        this.title('Quiz qestion ' + this.number + ' - Find.js demo');
    }

    setForms(qe) {
        let input_id = 0;
        const root = this.component();
        const content = root.id("content");
        const title = root.id("title");
        title.text(qe.qestion);
        for (let val in (qe.variants)) {
            content.add(
                Find.content(
                    `<input 
                        type="radio" 
                        id="variant${input_id}" 
                        name="radiobutton">
                        <label class="radio" for="variant${input_id}">
                            <span class="has-text-weight-medium" id="text${input_id}"></span>
                        </label>
                    </input>
                    <br>`
                )
            );
            content.id('text' + input_id).text(qe.variants[val]);
            input_id ++;
        }
    }

    setEvents(r) {

    }
}

const quiz = new Quiz(qestions);
quiz.init();