<template>
    <div class="mx-2 p-2">
        <form @submit.prevent="submitForm">
            <div class="flex justify-between flex-center mb-4">
                <router-link to="/memos/" class="btn">Back</router-link>
                <button class="btn-primary">Add New Memo</button>
            </div>
            <div class="box">
                <InputField name="name"
                            label="Nom de l'événement"
                            placeholder="Nom de l'événement"
                            required
                            @update:field="form.name = $event" :errors="errors" />
                <CheckBoxField :check-it="!!(checked)"
                               label="Privé"
                               @update:field="checked = $event"
                               class="block mb-2" />
                <div class="flex">
                    <InputField name="location"
                                label="Lieu"
                                placeholder="Lieu"
                                class="w-64 mr-4"
                                required
                                @update:field="form.location = $event" :errors="errors" />
                    <SelectorField name="category_id"
                                   label="Catégorie"
                                   :options="categories"
                                   class="mr-4"
                                   required
                                   @update:field="form.category_id = $event" :errors="errors" />
                    <DateTimeField
                        class="mr-4"
                        label="Date de début"
                        name="start_date"
                        required
                        @update:field="form.start_date = $event" :errors="errors" />
                    <DateTimeField
                        label="Date de fin"
                        name="end_date"
                        @update:field="form.end_date = $event" :errors="errors" />
                </div>
                <TextAreaField name="description"
                               label="Description"
                               placeholder="Your Description"
                               @update:field="form.description = $event" :errors="errors" />
            </div>
        </form>
    </div>
</template>

<script>
import InputField from '../../components/Form/InputField'
import TextAreaField from '../../components/Form/TextAreaField'
import CheckBoxField from '../../components/Form/CheckBoxField'
import DateTimeField from '../../components/Form/DateTimeField'
import SelectorField from '../../components/Form/SelectorField'

export default {
    name: 'EventCreate',
    components: {
        InputField, TextAreaField, CheckBoxField, DateTimeField, SelectorField
    },
    data: function () {
        return {
            checked: true,
            categories: [],
            form: {
                'category_id': '',
                'name': '',
                'private': '',
                'description': '',
                'start_date': '',
                'end_date': '',
                'location': '',
            },
            errors: null,
        }
    },
    mounted() {
        this.form.private = this.checked

        // eslint-disable-next-line no-undef
        axios.get('/api/events/categories')
            .then(response => {
                response.data.data.forEach(item => this.categories.push({value: item.data.event_category_id, label: item.data.attributes.data.name}))
            })
            .catch(errors => {
                this.errors = errors.response.data.errors
            })
    },
    methods: {
        submitForm: function () {
            this.form.private = this.checked

            // eslint-disable-next-line no-undef
            axios.post('/api/events', this.form)
                .then(response => {
                    this.$router.push(response.data.links.self)
                })
                .catch(errors => {
                    this.errors = errors.response.data.errors
                })
        }
    },
    watch: {
        checked: function () {
            console.log(this.checked, this.form)
            this.form.private = this.checked
        }
    }
}
</script>
