import AbstractView from "./abstracts/AbstractView.js";
import { client, lang } from "../index.js";

export default class extends AbstractView {
	constructor(params) {
		super(params, `${decodeURI(params.username)} - Profile`);
		this.username = decodeURI(params.username);
	}

	setTitle() {
		document.title = this.titleKey;
	}

	async postInit()
	{
		if (!this.profile)
			return 404;

		this.userId = this.profile.id;

		await this.blockButton();
		await this.friendButton();

		client.notice.rewrite_profile = async () => {
			await this.profile.getFriend();
			await this.profile.getBlock();
			await this.friendButton();
		};
	}

	async blockButton() {
		// Block option
		if (await client.isAuthenticated() === false)
			return;

		if (client.me.id != this.userId) {
			let block = document.getElementById("block");
			if (block == undefined) {
				block = document.createElement("p");
				// this.info.appendChild(block);
			}

			block.id = "block";
			block.onclick = async () => {
				if (!this.profile.isBlocked)
					await client.profiles.block(this.userId);
				else
					await client.profiles.deblock(this.userId);
				this.profile = await client.profiles.getProfile(this.username);

				this.blockButton();
			};
			if (this.profile.isBlocked)
				block.textContent = lang.get('profileUnblock', 'Unblock');
			else
				block.textContent = lang.get('profileBlock', 'Block');
		}
	}

	async friendButton() {
		if (await client.isAuthenticated() === false)
			return;

		if (client.me.id != this.userId) {
			let yes = document.getElementById("yes") || document.createElement("p");
			let no = document.getElementById("no") || document.createElement("p");
			let friend = document.getElementById("friend") || document.createElement("p");

			if (client.notice.data.asker.includes(this.userId)) {

				if (friend)
					friend.remove();

				yes.id = "yes";
				yes.textContent = lang.get('profileAcceptRequest', 'Accept Friend');
				yes.onclick = async () => {
					client.notice.accept_friend(this.userId);
				};

				no.id = "no";
				no.textContent = lang.get('profileDenyRequest', 'Decline Friend');
				no.onclick = async () => {
					client.notice.refuse_friend(this.userId);
				};

				// this.info.appendChild(yes);
				// this.info.appendChild(document.createTextNode(" "));
				// this.info.appendChild(no);

			}
			else {

				if (yes && no)
					yes.remove(); no.remove();

				friend.id = "friend";
				friend.onclick = async () => {
					if (this.profile.isFriend)
						await client.notice.remove_friend(this.userId);
					else
						await client.notice.ask_friend(this.userId);
					await client.profiles.getProfile(this.username);
					this.friendButton();
				};
				if (this.profile.isFriend)
					friend.textContent = lang.get('profileRemoveFriend', 'Remove Friend');
				else {
					friend.textContent = lang.get('profileAddFriend', 'Ask Friend');
				}
				// this.info.appendChild(friend);
			}
		}
	}

	async getHtml() {

		this.profile = await client.profiles.getProfile(this.username);
		if (!this.profile)
			return '';

		const logged = await client.isAuthenticated();

		return `
			<div class='mb-3' id='profileInfo'>
			  <h1>${this.username}</h1>
			  <a href=${this.profile.avatar_url} target='_blank'>
			    <img class='img-thumbnail' src=${this.profile.avatar_url} style='width:auto; max-height:20vh; min-height:10vh'>
			  </a>
			</div>
			<div>
			  <button class='btn btn-sm btn-success ${logged ? '' : 'd-none'}' id='addFriendButton'>Add Friend</button>
			  <button class='btn btn-sm btn-danger ${logged ? '' : 'd-none'}' id='removeFriendButton'>Remove Friend</button>
			</div>
			`;
	}
}