var userID;
var guildsCache = new Map();
window.onload = async () => 
{
    const fragment = new URLSearchParams(window.location.hash.slice(1));
    const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];
    if (!accessToken) return window.location.href = '/';
    updateUser(accessToken, tokenType);
    updateGuildData(accessToken, tokenType);
    document.getElementById('RoleRules').onclick = handleToggleRules;
};

function updateUser(accessToken, tokenType)
{
    const avatar = document.getElementById('avatar');
    const userName = document.getElementById('userName');
    fetch(`${window.location.origin}/api/getUser`, 
    {
        method: "POST",
        headers: {
            authorization: `${tokenType} ${accessToken}`,
        },
    })
    .then(result => result.json())
    .then(response => 
    {
        userID = response.id;
        avatar.style.backgroundImage = `url(https://cdn.discordapp.com/avatars/${response.id}/${response.avatar}.jpeg)`
        userName.textContent = response.username+"'s servers:"
    })
    .catch(console.error);
}
function updateGuildData(accessToken, tokenType)
{
    fetch(`${window.location.origin}/api/getGuildData`, 
    {
        method: "POST",
        headers: {
            authorization: `${tokenType} ${accessToken}`,
        },
    })
    .then(result => result.json())
    .then(guilds => 
    {
        if(guilds.Error) return console.log(guilds.Error)
        guildsCache = new Map();
        guilds.forEach(guild => {
            guildsCache.set(guild.id, guild)
        });;
        makeCards(guilds);
    })
    .catch(console.error);

}

function handleSettigns(event)
{
    var popup = document.getElementById('popup');
    var guild = guildsCache.get(event.target.id);
    if(!guild.hasRem) return window.open('https://discord.com/api/oauth2/authorize?client_id=356104008366030863&permissions=8&scope=bot')
    popup.classList.remove('hidden');
    popup.children[1].textContent = guild.name;
    popup.children[1].id = guild.id;
    let music = document.getElementById('music')
    music.textContent = guild.music? 'check_box' :'check_box_outline_blank';
    let strikes = document.getElementById('strikes')
    strikes.textContent = guild.strikes? 'check_box' :'check_box_outline_blank';
    music.onclick = requestChange;
    strikes.onclick = requestChange;
}

function handleClose(element)
{
    if(element.parentNode.id == 'roleRuleWrapper' || element.parentNode.id == 'FeedWrapper') document.getElementById('popup').classList.remove('hidden');
    element.parentNode.classList.add('hidden');
}
async function requestChange()
{
    
    return await fetch(`${window.location.origin}/api/change`, 
    {
        method: "POST",
        mode: "cors", 
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({guildID:event.target.parentNode.parentNode.children[1].id,userID, property:event.target.id}), // body data type must match "Content-Type" header
    })
    .then(result => result.json())
    .then(res => 
    {
        if(!res.error)
        {
            let music = document.getElementById('music')
            music.textContent = res.music? 'check_box' :'check_box_outline_blank';
            let strikes = document.getElementById('strikes')
            strikes.textContent = res.strikes? 'check_box' :'check_box_outline_blank';
        }
    })
    .catch(console.error);
}

async function makeCards(data)
{
    const canvas = document.createElement('div')
    canvas.classList.add('cards');
    canvas.id = 'cards'
    for(var item of data)
    {
        (async ()=>
        {
            var card = await makeCard(item);
            canvas.appendChild(card);
        })(item)
    }
    document.getElementById('Guilds').appendChild(canvas)
    document.getElementById("cards").onmousemove = e => {
        for(const card of document.getElementsByClassName("card")) {
          const rect = card.getBoundingClientRect(),
                x = e.clientX - rect.left,
                y = e.clientY - rect.top;
      
          card.style.setProperty("--mouse-x", `${x}px`);
          card.style.setProperty("--mouse-y", `${y}px`);
        };
    }
    document.getElementById('cards').onclick = handleSettigns;

}
async function makeCard(guild)
{
    const card = document.createElement('div')
    card.innerHTML =   `  <div id='${guild.id}'class="card">
    <div class="card-content ">
      <div class="card-image img${guild.hasRem}">
        <img src=${guild.icon}></img>
      </div>
      <div class="card-info-wrapper ${guild.hasRem}">
        <div class="card-info">
          <div class="card-info-title">
            <h3>${guild.name}</h3>  
            <h4>${guild.memberCount?guild.memberCount + ' users on the server.':'Rem is not on this server yet.'} </h4>
          </div>    
        </div>
      </div>
    </div>
  </div>`
    return card

}
async function getRules(guildID)
{
    return await fetch(`${window.location.origin}/api/getRules`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {guildID},
    })
    .then(result => result.json())
    .then(res => 
    {
        return res
    })
    .catch(console.error);
}
async function handleToggleRules(element)
{
    var guildID = element.target.parentNode.getElementsByTagName('h3')[0].id;
    var rulesElement=document.getElementById('rules');
    var rules = await getRules(guildID);
    if(!rules) return
    var ruleArr = []
    for(var rule of rules)
    {
        ruleArr.push(`<p id="${rule._id}" onclick="changeRule(this)" class="addRoleName">${rule.roleName}</p>`)
    }
    rulesElement.innerHTML = `
    <i onclick="handleClose(this)" class="close material-symbols-outlined" id="close_bt">
                cancel
            </i> 
            <p id="newRole" onclick="addRule(this)">New Rule</p>
            ${ruleArr.join('')}
    `
    rulesElement.classList.remove('hidden')
}
async function getFeeds(gid)
{
    return await fetch(`${window.location.origin}/api/getFeeds`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {guildid:gid},
    })
    .then(result => result.json())
    .then(res => 
    {
        return res
    })
    .catch(console.error);
}
async function getFeed(feedID)
{
    return await fetch(`${window.location.origin}/api/getFeed`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {feedID},
    })
    .then(result => result.json())
    .then(res => 
    {
        return res[0]
    })
    .catch(console.error);
}
async function getChannelID(id)
{
    if(url.split('@').length<1) return false
    return await fetch(url)
        .then(handleResponse)
        .then(handleData)
        .catch(handleError);
        function handleResponse(response) 
        {
            if(response.ok) return response.text();
        }
        function handleError(error) 
        {
            return error;
        }
        function handleData(data) 
        {         
            return data ? data.split('https://www.youtube.com/feeds/videos.xml?channel_id=')[1].split('"')[0] : false;
        }
}
async function getChannelName(channelID)
{
    return await fetch(`${window.location.origin}/api/getChannelName`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {channelID},
    })
    .then(response=>
        {
            if(response.ok) return response.text();
        })
    .then(data=>
        {
            return data.replaceAll('"','')
        })
    .catch(error=>
        {
            return error;
        });
}
async function handleToggleFeeds(element)
{
    var guildID = element.parentNode.getElementsByTagName('h3')[0].id;
    var feedElement=document.getElementById('feeds');
    var feeds = await getFeeds(guildID);
    if(!feeds) return
    var ruleArr = [];
    for (let i = 0; i < feeds.length; i++) {
        var ytchannelname = await getChannelName(feeds[i].YTChannelId)
        ruleArr.push(`<p id="${feeds[i]._id}" onclick="updateFeed(this)">${ytchannelname}</p>`)
    }

    feedElement.innerHTML = `
        <i onclick="handleClose(this)" class="close material-symbols-outlined" id="close_bt">
            cancel
        </i> 
        <p id="newFeed" onclick="addFeed(this)">New Feed</p>
        ${ruleArr.join('')}
    `
    feedElement.classList.remove('hidden');


}
function deleteRule(element)
{
    var ruleID = document.getElementById('roleRule').classList[1];
    fetch(`${window.location.origin}/api/deleteRule`, 
    {
        method: "POST",
        mode: "cors", 
        headers: {ruleID},
    }) 
    .then(result => result.json())
    .then(res => 
    {
        console.log(res);
        if(res.success)
        {
            element.parentNode.classList.add('hidden')
            document.getElementById('popup').classList.remove('hidden');
        }
        else alert(res.error);  
    })
    .catch(console.error);
}
function addRule(element)
{

    element.parentNode.classList.add('hidden');
    element.parentNode.parentNode.classList.add('hidden');
    var ruleWrapper = document.getElementById('roleRuleWrapper');
    ruleWrapper.classList.remove('hidden');
    document.getElementsByClassName('roleRuleWrapper')[0].setAttribute('data-before','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in elit vel nisi sagittis egestas. Donec a laoreet justo. Morbi interdum orci quis tempor tempor. Aenean tempus urna eget placerat maximus. Maecenas vitae condimentum felis, et mollis velit. Duis diam arcu, volutpat ut lectus et, aliquam vestibulum ante. Mauris dignissim libero quis condimentum interdum. Morbi dictum ex faucibus mi vehicula, sed blandit ex molestie. Pellentesque lacinia blandit pellentesque. Nullam at nisl dui.')
    document.getElementById('roleRule').innerText = 'New Rule'
    document.getElementById('roleID').placeholder = 'Role ID'
    document.getElementById('emojiID').placeholder = 'Emoji ID'
    document.getElementById('messageID').placeholder = 'Message ID'
    document.getElementById('emojiImg').src = 'images/favicon.ico';
}
function updateRule(element)
{
    var isNew=false;
    if(element.parentNode.children[1].innerText == 'New Rule') isNew = true;
    var ruleID;
    if(!isNew) ruleID = document.getElementById('roleRule').classList[1];
    var messageid = document.getElementById('messageID').value;
    var roleid =document.getElementById('roleID').value;
    var emojiid =document.getElementById('emojiID').value;
    var gid = document.getElementsByClassName('guildname')[0].id;
    fetch(`${window.location.origin}/api/updateRule`, 
    {
        method: "POST",
        mode: "cors", 
        headers: {messageid, roleid, emojiid, gid,isNew, ruleID},
    }) 
    .then(result => result.json())
    .then(res => 
    {
        if(res.success)
        {
            element.parentNode.classList.add('hidden')
            document.getElementById('popup').classList.remove('hidden');
        }
        else alert(res.error);  
    })
    .catch(console.error);
}
    
async function getRule(id)
{
    return await fetch(`${window.location.origin}/api/getRules`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {id},
    })
    .then(result => result.json())
    .then(res => 
    {
        return res
    })
    .catch(console.error);  
}
async function getMessage(guildid, messageid)
{
    return await fetch(`${window.location.origin}/api/getMessage`, 
    {
        method: "GET",
        mode: "cors", 
        headers: {guildid, messageid},
    })
    .then(result => result.json())
    .then(res => 
    {
        return res
    })
    .catch(console.error);  
}
async function  changeRule(element)
{
    var rule = await getRule(element.id)
    var message = await getMessage(rule.gID,rule.mID);
    message = message.message;
    element.parentNode.classList.add('hidden');
    element.parentNode.parentNode.classList.add('hidden')
    var ruleWrapper = document.getElementById('roleRuleWrapper');
    ruleWrapper.classList.remove('hidden');
    document.getElementsByClassName('roleRuleWrapper')[0].setAttribute('data-before', message)
    document.getElementById('roleRule').innerText = rule.roleName;
    document.getElementById('roleRule').classList = 'roleRule';
    document.getElementById('roleRule').classList.add(rule._id);
    document.getElementById('roleID').value = rule.roleID;
    document.getElementById('emojiID').value = rule.roleEmoji;
    document.getElementById('messageID').value = rule.mID;
    document.getElementById('emojiImg').src = `https://cdn.discordapp.com/emojis/${rule.roleEmoji}.webp`;
}
function addFeed(element)
{
    element.parentNode.classList.add('hidden');
    element.parentNode.parentNode.classList.add('hidden');
    var FeedWrapper = document.getElementById('FeedWrapper');
    FeedWrapper.classList.remove('hidden');
    document.getElementById('ChannelName').innerText = 'New Feed'
    document.getElementById('DCchannelID').placeholder = '';
    document.getElementById('YTchannelID').placeholder = '';
    document.getElementById('CostumMessageI').placeholder = '';
}
async function updateFeed(element)
{
    var feed = await getFeed(element.id)
    element.parentNode.classList.add('hidden');
    element.parentNode.parentNode.classList.add('hidden');
    var FeedWrapper = document.getElementById('FeedWrapper');
    FeedWrapper.classList.remove('hidden');
    document.getElementById('ChannelName').innerText = element.textContent;
    document.getElementById('ChannelName').classList ='';
    document.getElementById('ChannelName').classList.add(element.id);
    document.getElementById('DCchannelID').value = feed.ChannelId;
    document.getElementById('YTchannelID').value = feed.YTChannelId;
    document.getElementById('CostumMessageI').value = feed.CostumMessage;
}

function deleteFeed(element)
{
    var feedID = document.getElementById('ChannelName').classList[1];
    fetch(`${window.location.origin}/api/deleteFeed`, 
    {
        method: "POST",
        mode: "cors", 
        headers: {feedID},
    }) 
    .then(result => result.json())
    .then(res => 
    {
        if(res.success)
        {
            element.parentNode.classList.add('hidden')
            document.getElementById('popup').classList.remove('hidden');
        }
        else alert(res.error);  
    })
    .catch(console.error);
}

function _updateFeed(element)
{
    var isNew=false;
    if(element.parentNode.children[1].innerText == 'New Feed') isNew = true;
    var feedID;
    if(!isNew) feedID = document.getElementById('ChannelName').classList[1];
    console.log('fid', feedID)
    var gid = document.getElementsByClassName('guildname')[0].id;
    console.log('gid', gid)
    var DCchannelID = document.getElementById('DCchannelID').value;
    var YTchannelID = document.getElementById('YTchannelID').value;
    var CostumMessageI = document.getElementById('CostumMessageI').value;
    fetch(`${window.location.origin}/api/addFeed`, 
    {
        method: "POST",
        mode: "cors", 
        headers: {DCchannelID, YTchannelID, CostumMessageI, gid,isNew, feedID},
    }) 
    .then(result => result.json())
    .then(res => 
    {
        if(res.success)
        {
            element.parentNode.classList.add('hidden')
            document.getElementById('popup').classList.remove('hidden');
        }
        else alert(res.error);  
    })
    .catch(console.error);
}