<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>
        <div class="p-4">
            <form @submit.prevent="submitForm">
            <div class="flex justify-between mb-4">
                <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
                <button class="btn-primary">Save</button>
            </div>
                <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" />
            </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 () {
            // eslint-disable-next-line no-undef
            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() {
        // eslint-disable-next-line no-undef
        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>
