class UrlGenerator extends HTMLElement {
    constructor() {

        // Always call super first in constructor
        super();

        this.innerHTML =
            `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">URL</h2>
        </label>
        <textarea rows="4" name="message" id="url" placeholder="Enter your website."
            class="url-text-area w-100 border-2 p-3 rounded">https://</textarea>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" id="generate-qr-button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateURLQR()">Generate QR Code</button>
        </div>
    `;

    }

    /**
     * Runs each time the element is appended to or moved in the DOM
     */
    connectedCallback() {
    }

    /**
     * Runs when the element is removed from the DOM
     */
    disconnectedCallback() {
    }
}

function generateURLQR() {
    document.getElementById('generate-qr-button').disabled = true;
    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: document.getElementById('url').value.trim(), type: 'URL' })
    }).then(
        function (response) {
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
            document.getElementById('generate-qr-button').disabled = false;
        });
}

function initURL() {
    document.getElementById('qr-topic').innerHTML = `
    <url-generator></url-generator>
    `;
}

if ('customElements' in window) {
    customElements.define('url-generator', UrlGenerator);
}