<template>
    <div class="memo-edit">
        <div class="relative">
            <UploadableImage
                v-if="!loading"
                :image-width=1500
                :image-height=500
                location="cover"
                :image="form.attributes.cover_image"
                :author="form.attributes.posted_by"
                :id="form.memo_id"
                :model="form.type"
                classes="cover"
                :alt="form.name"/>
            <div class="flex-between ml-2 mt-1 absolute t-0">
                <router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
            </div>
        </div>
        <div class="p-2">
            <form @submit.prevent="submitForm">
                <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
                <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
                <div class="flex-end mt-1">
                    <button class="btn-primary">Save</button>
                </div>

            </form>
        </div>

    </div>
</template>

<script>
    import InputField from "../../components/InputField";
    import TextAreaField from "../../components/TextAreaField";
    import UploadableImage from "../../components/UploadableImage";

    export default {
        name: "MemoEdit",
        components: {
            InputField, TextAreaField, UploadableImage
        },
        data: function () {
            return {
                form: {
                    'name': '',
                    'memo': '',
                    'attributes': {}
                },
                errors: null,
                loading: true,
            }
        },
        methods: {
            submitForm: function () {
                axios.patch('/api/memos/' + this.$route.params.id, this.form)
                    .then(response => {
                        this.$router.push(response.data.links.self)
                    })
                    .catch(errors => {
                        this.errors = errors.response.data.errors
                    })
            }
        },
        mounted() {
            axios.get('/api/memos/' + this.$route.params.id)
                .then(response => {
                    this.form = response.data.data
                    this.loading = false
                })
                .catch(error => {
                    this.loading = false
                    if (error.response.status === 404) {
                        this.$router.back()
                    }
                })
        }
    }
</script>
