import { client, navigateTo } from "../index.js";
import { clear, fill_errors } from "../utils/formUtils.js";
import AbstractAuthentificateView from "./AbstractAuthentifiedView.js";

export default class extends AbstractAuthentificateView
{    
    constructor(params)
    {
        super(params, "Me");
	}

    async postInit()
    {
        document.getElementById("save-account-button").onclick = this.save_account;
        document.getElementById("delete-account-button").onclick = this.delete_account;
        document.getElementById("save-profile-button").onclick = this.save_profile;
    }

    async delete_account()
    {
        let current_password = document.getElementById("current_password-input").value;
        
        let response_data = await client.account.delete(current_password);

        console.log(await client.isAuthentificate())
        if (response_data === null || response_data === "user deleted")
        {
            navigateTo("/login");
            return;
        }
        clear("innerHTML", ["current_password-input"])
        fill_errors({"current_password-input": response_data["password"]}, "innerHTML")
    }

    async save_account()
    {
        let username = document.getElementById("username-input").value;
        let new_password = document.getElementById("new_password-input").value;
        let current_password = document.getElementById("current_password-input").value;
    
        let data = {};
    
        data.username = username;
        if (new_password.length != 0)
            data.new_password = new_password;

        let response_data = await client.account.update(data, current_password);

        if (response_data === null)
        {
            navigateTo("/login");
            return;
        }

        if (response_data === "data has been alterate")
            response_data = {"save-account": "saved"}

        clear("innerHTML", ["username", "new_password", "current_password", "save-account", "delete-account"])
        fill_errors(response_data, "innerHTML")
    }
    
    async save_profile()
    {
        let avatar = document.getElementById("avatar-input");

        if (avatar.files[0] !== undefined)
        {
            let form_data = new FormData();
            form_data.append("file", avatar.files[0]);
            await client.me.change_avatar(form_data);
        }
        document.getElementById("save-profile").innerHTML = "Saved";
    }

    async getHtml()
    {
        return `
            <link rel="stylesheet" href="/static/css/me.css">
			<h1>ME</h1>
            <div id="main">
                <div class="account">
                    <h3>Account</h3>
                    <input type="text" placeholder="username" id="username-input" text=${client.me.username}>
                    <span id="username"></span>
                    <input type=password placeholder="new_password" id="new_password-input">
                    <span id="new_password"></span>
                    <input type=password placeholder="current_password" id="current_password-input">
                    <span id="current_password"></span>

                    <input type="button" value="Save Credentials" id="save-account-button">
                    <span id="save-account"></span>
                    <input type="button" value="Delete Account" id="delete-account-button">
                    <span id="delete-account"></span>
                </div>
                <div class="profile">
                    <h3>Profile</h3>
                    <input type="file" id="avatar-input" accept="image/png, image/jpeg">
                    <input type="button" value="Save profile" id="save-profile-button">
                    <span id="save-profile"></span>
                </div>
                <a href="/logout" class="nav__link" data-link>Logout</a>
            </div>
        `;
    }
}