<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    import axios from 'axios'; // The HTTP library, not a part of Vue

    const route = useRoute();
    const suppliedId: number = Number(route.params.id);

    interface Member {
        id: number;
        ntnuUsername: string;
        firstName: string;
        lastName: string;
        email: string;
        balance: number;
        imagePreference: string;
    }

    let member = ref<Member>({
        id: 1,
        ntnuUsername: ' ',
        firstName: '',
        lastName: '',
        email: '',
        balance: 0,
        imagePreference: ''
    });

    const getMemberInfo = async (id: number) => {
        try {
            const url = "http://127.0.0.1:8000/member/" + id;
            const response = await axios.get(url);
            member.value = response.data;
        } catch (error) {
            console.error("Error fetching data: ", error);
        }
    }

    const updateMemberInfo = async (id: number) => {
        try {
            const payload = {
                ntnuUsername: member.value.ntnuUsername,
                firstName: member.value.firstName,
                lastName: member.value.lastName,
                email: member.value.email
            };
            const url = "http://127.0.0.1:8000/member/" + id;

            const config = {
                method: 'put',
                url: url,
                data: payload
            };

            const response = await axios(config);
            // The return value is the user data so we map it
            member.value = response.data;
        } catch (error) {
            console.error("Error updating user data: ", error);
        }
    }

    onMounted(async () => {
        await getMemberInfo(suppliedId);
    });
</script>

<template>
    <div class="member-edit">

        <h3>{{ member.firstName + " " + member.lastName + " : " + member.id }}</h3>
        <form @submit.prevent>
            <label for="fname">NTNU username</label><br>
            <input type="text" id="ntnu-username" v-model="member.ntnuUsername"><br>

            <label for="fname">First name</label><br>
            <input type="text" id="first-name" v-model="member.firstName"><br>

            <label for="fname">Last name</label><br>
            <input type="text" id="last-name" v-model="member.lastName"><br>

            <label for="fname">E-mail</label><br>
            <input type="text" id="email" v-model="member.email"><br>

            <button type="button" @click.prevent="updateMemberInfo(member.id)">Save</button>
        </form>
    </div>
</template>

<style scoped>
.member-edit {
    max-width: 1200px; /* Width of the form */
    margin: 0 auto;
    padding: 20px;
    background-color: #282828;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.member-edit h3 {
    text-align: center;
    color: #fff;
    margin-bottom: 30px; /* Increased bottom margin for the heading */
}

.member-edit form {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Increased gap between form elements */
}

.member-edit label {
    color: #ddd;
    font-size: 16px;
    text-align: left; /* Left-aligned text */
    margin-top: 4px;
    margin-bottom: 0px; /* Slightly reduced bottom margin for labels */
}

.member-edit input[type="text"] {
    width: 100%;
    padding: 8px 8px 8px 8px; /* Increased vertical padding for input fields */
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 10px; /* Increased bottom margin for input fields */
}

.member-edit button {
    background-color: #CBA135;
    color: white;
    padding: 8px; /* Increased vertical padding for the button */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.member-edit button:hover {
    background-color: #A7801A;
}

@media (max-width: 800px) {
    .member-edit {
        padding: 8px;
    }
}
</style>
