<template>
  <v-container px-5>
      <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
              <h4 class="success--text">Create a new Meetup</h4>
          </v-flex>
      </v-layout>
      <v-form lazy-validation ref="form">
      <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
              <v-text-field
              name='title'
              id='title'
              label='Title'
              required
              v-model="title"
              ></v-text-field>
          </v-flex>
      </v-layout>
            <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
              <v-text-field
              name='location'
              id='location'
              label='Location'
              :rules='nameRules'
              v-model="location"
              required
              ></v-text-field>
          </v-flex>
      </v-layout>
            <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
              <!-- <v-text-field
              name='imageUrl'
              id='image-url'
              label='Image URL'
              v-model="imageUrl"
              :rules="emailRules"
              required
              ></v-text-field> -->
            <v-file-input
            show-size counter
            prepend-icon="mdi-camera"
            label="File input">
            </v-file-input>
          </v-flex>
      </v-layout>
       <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
         <img :src='imageUrl' height="150">
          </v-flex>
      </v-layout>
            <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3>
              <v-textarea
              name='description'
              id='ddescription'
              label='Description'
              v-model="description"
               persistent-hint
            outlined
              counter
              maxlength="200"
              required
              ></v-textarea>
          </v-flex>
      </v-layout>
             <v-layout row wrap mb-5>
          <v-flex xs12 sm6 offset-sm3>
         <h5 >Pick a date and time</h5>
          </v-flex>
      </v-layout>
             <v-layout row wrap px-4>
          <v-flex xs12 sm6 class="text-sm-right" px-3 mb-5>
         <v-date-picker v-model="date"></v-date-picker>
          </v-flex>
          <v-flex xs12 sm6 px-3>
         <v-time-picker v-model="time" format="24hr"></v-time-picker>
          </v-flex>
      </v-layout>
                <v-layout row wrap>
          <v-flex xs12 sm6 offset-sm3 mt-5>
             <v-btn color="success" :disabled="!formIsValid" @click="createMeetup">Create Meetup</v-btn>
          </v-flex>
      </v-layout>
      </v-form>
  </v-container>
</template>
<script>
export default {
    data(){
        return{
            title:'',
            location:'',
            imageUrl:'',
            description:'',
            date:new Date().toISOString().substr(0, 10),
            time:new Date(),
         nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
      ],
        emailRules: [
        v => !!v || 'E-mail is required',
        v => /^(ftp|http|https):\/\/[^ "]+$/.test(v) || 'E-mail must be valid',
      ],
        }
    },
    computed:{
        formIsValid(){
            return this.title !='' && this.location !='' && this.imageUrl !='' && this.description !=''
        },
        dateAndTime(){
            const date = new Date(this.date)

            if(typeof this.time == 'string'){
                const hours = this.time.match(/^(\d+)/)[1]
                const minutes = this.time.match(/:(\d+)/)[1]

                date.setHours(hours)
                date.setMinutes(minutes)
            }
            else{

            date.setHours(this.time.getHours());
            date.setMinutes(this.time.getMinutes())
            }
            return date
        }
    },
    methods:{
        createMeetup(){
            const payload = {
                title:this.title,
                imageUrl:this.imageUrl,
                description:this.description,
                location:this.location,
                date:this.dateAndTime.toISOString()
}
            this.$store.dispatch("createMeetup",payload)
            this.$router.push('/meetups')
            // this.$refs.form.reset()

}
    }
}
</script>