<template>
    <v-dialog max-width="600px" v-model="dialog">
        <v-btn flat slot="activator" class="success">เพิ่มกิจกรรมอาสาใหม่</v-btn>
        <v-card>
            <v-card-title>
                <h2>เพิ่มกิจกรรมจิตอาสา</h2>
            </v-card-title>
            <v-card-text>
                <v-form class="px-3" ref="form">
                    <v-text-field v-model="title" label="ชื่อกิจกรรม" prepend-icon="folder"
                    :rules="inputRules"></v-text-field>
                    <v-text-field  v-model="content" label="สถานที่ดำเนินการ" prepend-icon="edit"
                    :rules="inputRules"></v-text-field>

                    <v-menu v-model="menu" :close-on-content-click="false">
                        <v-text-field slot="activator" :rules="inputRules"
                        :value="formattedDate" clearable label="วันเริ่มต้นกิจกรรม"
                        prepend-icon="date_range">
                        </v-text-field>
                        <v-date-picker v-model="due" @change="menu = false"></v-date-picker>
                    </v-menu>

                    <v-menu v-model="menu" :close-on-content-click="false">
                        <v-text-field slot="activator" :rules="inputRules"
                        :value="formattedDate" clearable label="วันสิ้นสุดกิจกรรม"
                        prepend-icon="date_range">
                        </v-text-field>
                        <v-date-picker v-model="due" @change="menu = false"></v-date-picker>
                    </v-menu>

                    <v-text-field v-model="title" label="จำนวนชั่วโมง" prepend-icon="folder"
                    :rules="inputRules"></v-text-field>

                    <v-spacer></v-spacer>
                    <v-btn flat @click="submit" class="success mx-0 mt-3"
                    :loading="loading">เพิ่มโครงการ</v-btn>
                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
import format from 'date-fns/format'
import db from '@/fb'
export default {
    data(){
        return{
            title: '',
            content: '',
            due: null,
            menu: false,
            inputRules: [
                v => !!v || 'this field is required',
                v => v.length >= 3 || 'Mininum lenght is 3 characters'
            ],
            loding: false,
            dialog: false
        }
    },
    methods: {
        submit(){
            if(this.$refs.form.validate()){
                this.loading = true
                const project = {
                    title: this.title,
                    content: this.content,
                    due: format(this.due, 'Do MMM YYYY'),
                    person: 'anurak',
                    status: 'ongoing'
                }
                db.collection('projects').add(project).then(() => {
                    this.loading = false
                    this.dialog = false,
                    this.$emit('projectAdded')
                })
            }
        }
    },
    computed: {
        formattedDate () {
            console.log(this.due)
            return this.due ? format(this.due, 'Do MMM YYYY') : ''
        }
    }
}
</script>