const basicCard = document.createElement('basic-card');
const configStatus = document.createElement('status');
const style = `
<style>
.column {
    float: left;
    width: 24%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
    border-radius: 3%;
    transition: 0.3s;
    margin: 15px 3.33%;
    padding: 12px 16px;
    background-color: #282c34;
    color: #FFFFFF;
  }

  .column:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
  }
  
  /* Clear floats after the columns */
  .row {
    content: "";
    clear: both;
    display: flex;
    flex-wrap: wrap;
  }
p {
    text-align: center;
}
a {
    text-align: center;
    color: white;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
    border-radius: 3%;
    transition: 0.3s;
    position: relative;
    width: 250px;
    height: 200px;
    padding: 5px;
    background-color: #282c34;
    color: #FFFFFF;
  }  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
  }
  .container {
    padding: 6px 16px;
  }
  label{
    display: inline;
    float: left;
    clear: left;
    width: 250px;
    text-align: left;
}
input {
  display: inline;
  float: right;
}
</style>
`;

basicCard.innerHTML = `
${style}
<div id="card-container" class="container">
<div class="card">
    <h4><p><slot name="username" /></p></h4>
    <div>
        <p><slot name="join-date" /></p>
        <p><slot id="discord-id" name="discord-id" /></p>
        <p><slot id="pic-link" name="pic-link" /></p>
    </div>
</div>
</div>
`;

configStatus.innerHTML = `
${style}
    <div class="row">
        <div class="column">
            <h4><p>Status</p></h4>
            <p>Uptime: <slot name="uptime" /></p>
            <p>Last Bump was <slot name="lastbump" /></p>
            <p>by <slot id="lastbumper" name="lastbumper" /></p>
        </div>
        <br>
        <div class="column">
            <h4><p>Config</p></h4>
            <form>
                <label for="Guild">Guild: </label>
                <input type="text" id="Guild" name="Guild" readonly/>
                <label for="AdminChannel">Admin Channel: </label>
                <input type="select" id="AdminChannel" name="AdminChannel"/>
                <label for="AdminRole">Admin Role: </label>
                <input type="select" id="AdminRole" name="AdminRole"/>
                <label for="MonitorChannel">Monitor Channel: </label>
                <input type="select" id="MonitorChannel" name="MonitorChannel"/>
                <label for="MonitorRole">Monitor Role: </label>
                <input type="select" id="MonitorRole" name="MonitorRole"/>
                <label for="IntroChannel">Intro Channel: </label>
                <input type="select" id="IntroChannel" name="IntroChannel"/>
                <label for="VerifiedRole">Verified Role: </label>
                <input type="select" id="VerifiedRole" name="VerifiedRole"/>
                <label for="OutFile">Logging OutFile: </label>
                <input type="text" id="OutFile" name="OutFile" />
                <label for="KBTeam">KB Team: </label>
                <input type="text" id="KBTeam" name="KBTeam" />
                <label for="KBChann">KB Channel: </label>
                <input type="text" id="KBChann" name="KBChann" />
                <label for="level">Logging Level: </label>
                <input type="number" id="Level" name="Level" />
                <label for="ProgName">Program Name: </label>
                <input type="text" id="ProgName" name="ProgName" />
                <label for="UseStdout">Use stdout: </label>
                <input type="checkbox" id="UseStdout" name="UseStdout"/>
                <label for="submitchanges"></label>
                <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
            </form>
        </div>
        <br>
        <div id="admin-stats" class="column">
            <h4><p>Admin Stats</p></h4>
        </div>
    </div>
`;

class ConfigStatusClass extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(configStatus.cloneNode(true));
    }
    async setData(data) {
        this.shadowRoot.querySelector("#submitchanges").addEventListener('submit', handleForm);
        this.shadowRoot.querySelector("#Guild").value = data.GuildID;
        this.shadowRoot.querySelector("#AdminChannel").value = data.AdminChannel;
        this.shadowRoot.querySelector("#AdminRole").value = data.AdminRole;
        this.shadowRoot.querySelector("#MonitorChannel").value = data.MonitorChann;
        this.shadowRoot.querySelector("#MonitorRole").value = data.MonitorRole;
        this.shadowRoot.querySelector("#IntroChannel").value = data.IntroChann;
        this.shadowRoot.querySelector("#VerifiedRole").value = data.VerifiedRole;
        this.shadowRoot.querySelector("#OutFile").value = data.LogOpts.OutFile;
        this.shadowRoot.querySelector("#KBTeam").value = data.LogOpts.KBTeam;
        this.shadowRoot.querySelector("#KBChann").value = data.LogOpts.KBChann;
        this.shadowRoot.querySelector("#Level").value = data.LogOpts.Level;
        this.shadowRoot.querySelector("#ProgName").value = data.LogOpts.ProgName;
        this.shadowRoot.querySelector("#UseStdout").checked = data.LogOpts.UseStdout == "true";
        fetch('https://thanos.nightmare.haus/api/user?userID=' + data.LastBumper)
            .then(response => response.json())
            .then(userData => {
                this.shadowRoot.querySelector("#lastbumper").innerHTML = userData.user.username;
            });
        this.loadStats(data.Stats)


    }
    async loadStats(data) {
        var shadowRoot = this.shadowRoot;
        Object.keys(data).forEach(function(uid) {
            var score = data[uid];
            fetch('https://thanos.nightmare.haus/api/user?userID=' + uid)
            .then(response => response.json())
            .then(userData => {
                var stats = shadowRoot.querySelector("#admin-stats");
                var userName = document.createElement("p");
                userName.innerText = userData.user.username + ": " + score;
                stats.appendChild(userName);
            });
        })
    }

}


class UserCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(basicCard.cloneNode(true));
    }
    connectedCallback() {
        this.shadowRoot.querySelector('#card-container').addEventListener('click', () => this.showModal());
    }

    showModal() {
        const userID = this.shadowRoot.querySelector('#discord-id').assignedNodes()[0].textContent;
        const userPic = this.shadowRoot.querySelector("#pic-link").assignedNodes()[0].querySelector("a").getAttribute("href");
        fetch('https://thanos.nightmare.haus/api/user?userID=' + userID)
            .then(response => response.json())
            .then(data => {
                if (data === undefined || data === null) {
                    alert("User not found.");
                    return;
                }
                document.querySelector("#myModal").style.display = "block";
                document.querySelector('#modal-join').textContent = new Date(data.joined_at).toLocaleString();
                document.querySelector('#modal-userID').textContent = data.user.username;
                document.querySelector('#modal-avatar').src = `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=256`;
                document.querySelector('#modal-verification').src = userPic;
                document.querySelector('#modal-verification').style = "max-height: 500px;";
            });
    }

}
window.customElements.define('user-card', UserCard);
window.customElements.define('config-status', ConfigStatusClass);