import config from "./config_local.js";

class TgApp {
    constructor(containerId, userId) {
        this.container = document.getElementById(containerId);
        this.userId = userId;
        this.btnBox = this.createBox("btnBox");
        this.container.appendChild(this.btnBox);
    }

    actionMain() {
        this.createCardBox();

        // this.createDefaultBox();
        this.getScanBtn();
        this.getCard();
    }

    setUserId(userId) {
        this.userId = userId;
    }

    createCardBox() {
        this.cardBox = document.createElement("div");
        this.cardBox.setAttribute("id", "cardBox");

        this.cardBox.innerHTML = templates.preloader();

        this.container.appendChild(this.cardBox);
    }

    createDefaultBox() {
        this.defaultBox = document.createElement("div");
        this.defaultBox.setAttribute("id", "defaultBox");

        this.defaultBox.innerHTML = templates.defaultBox();

        this.container.appendChild(this.defaultBox);
    }

    getCard() {
        let botId = config.config.botId;
        fetch(config.config.apiUrl + `api/tg-bot/get-card-by-dialog/${this.userId}/${botId}`, {
            method: 'GET', // Здесь так же могут быть GET, PUT, DELETE
            headers: {
                // Добавляем необходимые заголовки
                'Content-type': 'application/json; charset=UTF-8',
            },
        })
            .then((response) => response.json())
            .then((data) => {
                console.log(data)
                this.cardBox.innerHTML = templates.cardBox(data.card_file.file, data.balance)
                // {title: "foo", body: "bar", userId: 1, id: 101}
            })
    }

    getScanBtn() {
        fetch(config.config.apiUrl + `api/tg-bot/get-scan-btn/${this.userId}`, {
            method: 'GET', // Здесь так же могут быть GET, PUT, DELETE
            headers: {
                // Добавляем необходимые заголовки
                'Content-type': 'text/html; charset=UTF-8',
            },
        })
            .then((response) => response.json())
            .then((data) => {
                this.btnBox.innerHTML = data.html
                // {title: "foo", body: "bar", userId: 1, id: 101}
            })
    }

    createBox(id) {
        let box = document.createElement("div");
        box.setAttribute("id", id);

        return box;
    }

    // createScanner() {
    //     let html5QrcodeScanner = new Html5QrcodeScanner(
    //         "scanner_box",
    //         {fps: 10, qrbox: {width: 250, height: 250}},
    //         /* verbose= */ false);
    //     html5QrcodeScanner.render(this.onScanSuccess);
    // }

    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
    }

    getAction(action) {
        if (action === "actionMain") {
            return this.actionMain;
        }

        return false;
    }


}

const templates =
    {
        preloader: () => {
            return '<img src="/resources/main/images/l.gif">';
        },
        defaultBox: () => {
            return `<div class="card">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
                        <div class="card-body">
                            <h5 class="card-title">Акция на Старый Новый Год</h5>
                            <p class="card-text">Акция на Старый Новый Год Акция на Старый Новый Год Акция на Старый Новый Год Акция на Старый Новый Год</p>
                            <a href="#!" data-mdb-ripple-init class="btn btn-primary">Принять участие</a>
                        </div>
                    </div>`;
        },
        cardBox: (cardUrl, balance) => {
            return `<div class="card" style="padding: 10px;">
                        <img src="${cardUrl}" class="card-img-top"/>
                        <div class="card-body">
                            <h4 class="card-title">Баланс: ${balance}</h4>
                        </div>
                    </div>`;
        }
    }

export {TgApp}