<template>
  <v-container fluid grid-list-md>
    <h3>Create a new event</h3>
    <v-form>
      <v-stepper v-model="e1" vertical>
        <v-stepper-step step="1" :complete="e1 > 1">Basic Informations
        <small>Title and description</small>
        </v-stepper-step>
        <v-stepper-content step="1">
          <v-layout row wrap>
            <v-flex xs12>
          <v-text-field
            label="Title"
            v-model="event.title"
            :counter="100"
            required
          ></v-text-field>
            </v-flex>
          <v-flex md6>
            <v-text-field
              label="Description"
              v-model="event.description"
              multiLine
              required
            ></v-text-field>
          </v-flex>
          <v-flex md6>
            <vue-markdown class="markdown-render"
              :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
              :source="event.description"
              :show="true" :html="false" :breaks="true" :linkify="true"
              :emoji="true" :typographer="true" :toc="false"
            ></vue-markdown>
          </v-flex>
            <v-flex md12>
              <v-select
                v-bind:items="categories"
                v-model="event.category"
                item-text="name"
                item-value="@id"
                label="Categories"
                single-line
                bottom
              ></v-select>
            </v-flex>
            <v-flex md12>
              <!--<v-text-field
                v-model="tagsToSend"
                label="Tags"
              ></v-text-field>-->
              <v-select
                v-model="tagsToSend"
                label="Tags"
                chips
                tags
                :items="tagsFetched"
              ></v-select>
            </v-flex>
          </v-layout>
          <v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
        </v-stepper-content>
        <v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
        <v-stepper-content step="2">
          Event starts at:
          <v-text-field type="datetime-local" v-model="event.startDate"></v-text-field>
          <!--<v-layout row wrap>
            <v-flex md6>
              <v-dialog
                persistent
                v-model="modals.beginning.date"
                lazy
                full-width
              >
                <v-text-field
                  slot="activator"
                  label="Beginning of the event date"
                  v-model="event.startDate.date"
                  prepend-icon="event"
                  readonly
                ></v-text-field>
                <v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
                  <template scope="{ save, cancel }">
                    <v-card-actions>
                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
                      <v-btn flat primary @click.native="save()">Save</v-btn>
                    </v-card-actions>
                  </template>
                </v-date-picker>
              </v-dialog>
            </v-flex>
            <v-flex md6>
              <v-dialog
                persistent
                v-model="modals.beginning.time"
                lazy
              >
                <v-text-field
                  slot="activator"
                  label="Beginning of the event time"
                  v-model="event.startDate.time"
                  prepend-icon="access_time"
                  readonly
                ></v-text-field>
                <v-time-picker v-model="event.startDate.time" actions format="24h">
                  <template scope="{ save, cancel }">
                    <v-card-actions>
                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
                      <v-btn flat primary @click.native="save()">Save</v-btn>
                    </v-card-actions>
                  </template>
                </v-time-picker>
              </v-dialog>
            </v-flex>
          </v-layout>-->
          Event ends at:
          <v-text-field type="datetime-local" v-model="event.endDate"></v-text-field>
          <!--<v-layout row wrap>
            <v-flex md6>
              <v-dialog
                persistent
                v-model="modals.end.date"
                lazy
                full-width
              >
                <v-text-field
                  slot="activator"
                  label="End of the event date"
                  v-model="event.endDate.date"
                  prepend-icon="event"
                  readonly
                ></v-text-field>
                <v-date-picker v-model="event.endDate.date" scrollable >
                  <template scope="{ save, cancel }">
                    <v-card-actions>
                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
                      <v-btn flat primary @click.native="save()">Save</v-btn>
                    </v-card-actions>
                  </template>
                </v-date-picker>
              </v-dialog>
            </v-flex>
            <v-flex md6>
              <v-dialog
                persistent
                v-model="modals.end.time"
                lazy
              >
                <v-text-field
                  slot="activator"
                  label="End of the event time"
                  v-model="event.endDate.time"
                  prepend-icon="access_time"
                  readonly
                ></v-text-field>
                <v-time-picker v-model="event.endDate.time" format="24h" actions >
                  <template scope="{ save, cancel }">
                    <v-card-actions>
                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
                      <v-btn flat primary @click.native="save()">Save</v-btn>
                    </v-card-actions>
                  </template>
                </v-time-picker>
              </v-dialog>
            </v-flex>
          </v-layout>-->

          <vuetify-google-autocomplete
            id="map"
            append-icon="search"
            classname="form-control"
            placeholder="Start typing"
            label="Location"
            enable-geolocation
            v-on:placechanged="getAddressData"
          >
          </vuetify-google-autocomplete>
          <v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
        </v-stepper-content>
        <v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
        <v-stepper-content step="3">
          <v-text-field
            label="Number of seats"
            v-model="event.seats"
          ></v-text-field>
          <v-text-field
            label="Price"
            prefix="$"
            type="float"
            v-model="event.price"
          ></v-text-field>
        </v-stepper-content>
      </v-stepper>
    </v-form>
    <v-btn color="primary" @click="create">Create event</v-btn>
  </v-container>
</template>

<script>
  // import Location from '@/components/Location';
  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
  import eventFetch from '@/api/eventFetch';
  import VueMarkdown from 'vue-markdown';

  export default {
    name: 'create-event',
    props: ['id'],

    components: {
/*      Location,*/
      VueMarkdown,
      VuetifyGoogleAutocomplete
    },
    data() {
      return {
        e1: 0,
        event: {
          title: '',
          description: '',
          startDate: new Date(),
          endDate: new Date(),
          seats: 0,
          address: {
            description: null,
            floor: null,
            geo: {
              latitude: null,
              longitude: null,
            },
            addressCountry: null,
            addressLocality: null,
            addressRegion: null,
            postalCode: null,
            streetAddress: null,
          },
          price: 0,
          category: null,
          tags: [],
          participants: [],
        },
        categories: [],
        tags: [{ name: 'test' }, { name: 'montag' }],
        tagsToSend: [],
        tagsFetched: [],
      };
    },
    created() {
      if (this.id) {
        this.fetchEvent();
      }
    },
    mounted() {
      this.fetchCategories();
      this.fetchTags();
    },
    methods: {
      create() {
        this.event.seats = parseInt(this.event.seats, 10);
        this.tagsToSend.forEach((tag) => {
          this.event.tags.push({
            name: tag,
            // '@type': 'Tag',
          });
        });
        this.event.organizer = "/accounts/" + this.$store.state.user.account.id;
        this.event.participants = ["/accounts/" + this.$store.state.user.account.id];
        this.event.price = parseFloat(this.event.price);

        if (this.id === undefined) {
          eventFetch('/events', this.$store, {method: 'POST', body: JSON.stringify(this.event)})
            .then(response => response.json())
            .then((data) => {
              this.loading = false;
              this.$router.push({name: 'Event', params: {id: data.id}});
            });
        } else {
          eventFetch(`/events/${this.id}`, this.$store, {method: 'PUT', body: JSON.stringify(this.event)})
            .then(response => response.json())
            .then((data) => {
              this.loading = false;
              this.$router.push({name: 'Event', params: {id: data.id}});
            });
        }
      },
      fetchCategories() {
        eventFetch('/categories', this.$store)
          .then(response => response.json())
          .then((data) => {
            this.loading = false;
            this.categories = data['hydra:member'];
          });
      },
      fetchTags() {
        eventFetch('/tags', this.$store)
          .then(response => response.json())
          .then((data) => {
            this.loading = false;
            data['hydra:member'].forEach((tag) => {
              this.tagsFetched.push(tag.name);
            });
          });
      },
      fetchEvent() {
        eventFetch(`/events/${this.id}`, this.$store)
          .then(response => response.json())
          .then((data) => {
            this.loading = false;
            this.event = data;
            console.log(this.event);
          });
      },
      getAddressData: function (addressData) {
        console.log(addressData);
        this.event.address = {
          geo: {
            latitude: addressData.latitude,
            longitude: addressData.longitude,
          },
          addressCountry: addressData.country,
          addressLocality: addressData.locality,
          addressRegion: addressData.administrative_area_level_1,
          postalCode: addressData.postal_code,
          streetAddress: `${addressData.street_number} ${addressData.route}`,
        };
      },
    },
  };
</script>

<style>
  .markdown-render h1 {
    font-size: 2em;
  }
</style>
