const basicCard = document.createElement('basic-card');
basicCard.innerHTML = `
<style>
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;
  }
</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>
`;


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);