<template>
    <div>
        <div v-if="message" class="alert">{{ message }}</div>
        <div v-if="!loaded">Loading...</div>
        <form @submit.prevent="onSubmit($event)" v-else>
            <div class="form-group">
                <label for="username">Name</label>
                <input id="username" v-model="user.name"/>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input id="email" type="email" v-model="user.email"/>
            </div>
            <div class="form-group">
                <button type="submit" :disabled="saving">Update</button>
                <button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
            </div>
        </form>
    </div>
</template>

<style lang="scss" scoped>
$red: lighten(red, 30%);
$darkRed: darken($red, 50%);

.form-group label {
    display: block;
}

.alert {
    background: $red;
    color: $darkRed;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 50%;
    border: 1px solid $darkRed;
    border-radius: 5px;
}
</style>

<script>
import api from '../api/users';

export default {
    data() {
        return {
            message: null,
            loaded: false,
            saving: false,
            user: {
                id:    null,
                name:  "",
                email: "",
            }
        }
    },
    methods: {
        onSubmit(event) {
            this.saving = true;

            api.edit(this.user.id, {
                name: this.user.name,
                email: this.user.email,
            }).then((response) => {
                this.message = 'User Updated';
                setTimeout(() => this.message = null, 2000);
                this.user = response.data.data;
            }).catch((error) => {
                console.log(error);
            }).then(_ => this.saving = false);
        },
        onDelete(event) {
            this.saving = true;
            api.delete(this.user.id)
            .then((response) => {
                this.message = 'User Deleted';
                setTimeout(() => this.$router.push({ name:'users.index' }), 2000);
            });
        }
    },
    created() {
        api.find(this.$route.params.id).then((response) => {
            this.loaded = true;
            this.user = response.data.data;
        }).catch((err) => {
            this.$router.push({ name:'404' });
        });
    }
};
</script>
