<template>
  <div>
    <app-loader :show="isLoading" />
    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
      <v-layout row wrap>
        <v-flex>
          <v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory @change="changeRange">
            <v-btn flat v-for="r in ranges" :key="r.value" :value="r.value">{{r.name}}</v-btn>
          </v-btn-toggle>
          <v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" @change="changeRange" :items="ranges" item-text="name" item-value="value"></v-select>
        </v-flex>
      </v-layout>
      <v-layout row wrap v-for="event in events" :key="event.id">
        <v-flex xs12>
          <Event :event="event" :has-user="hasUser" :ignore="ignore" />
        </v-flex>
      </v-layout>
    </v-container>
    <v-snackbar
        v-model="snackbar"
        :color="snackColor"
        :timeout="5000"
    >
      {{ snackText }}
    </v-snackbar>
  </div>
</template>

<script>
  import {
    findEvents,
    ignoreBand,
    ignoreDanceHall,
    ignoreCity,
    ignoreMunicipality,
    ignoreState
  } from "~/utils/graph-client";

  import auth from "~/utils/auth";

  import Event from "./Event";

  export default {
    components: {
      Event
    },
    data() {
      return {
        status: "loading",
        property: undefined,
        propertyId: undefined,
        order: undefined,
        orderId: undefined,
        originalProperty: undefined,
        selectedPackage: undefined,
        selectedImages: [],
        submitError: "",
        user: undefined,
        snackbar: false,
        snackColor: "success",
        snackText: "",
        range: undefined,
        ranges: [
          {name: "1 vecka", value: "ONE_WEEK"},
          {name: "2 veckor", value: "TWO_WEEKS"},
          {name: "1 månad", value: "ONE_MONTH"},
          {name: "1 kvartal", value: "ONE_QUARTER"},
          {name: "1 år", value: "ONE_YEAR"}
        ]
      };
    },
    computed: {
      isLoading() {
        return this.status === "loading";
      },
      isLoadFailed() {
        return this.status === "load-failed";
      },
      isReady() {
        return this.status === "ready";
      },
      isSubmitting() {
        return this.status === "submitting";
      },
      isSubmitted() {
        return this.status === "submitted";
      },
      isSubmitFailed() {
        return this.status === "submit-failed";
      },
      hasUser() {
        return this.user !== undefined && this.user !== null;
      }
    },
    mounted() {
      const {range} = this.$route.query;
      this.range = range;
      this.fetchEvents();
      this.fetchUser();
    },
    watch: {
      "$route.query"() {
        const {range} = this.$route.query;
        this.range = range;
        this.fetchEvents();
        this.fetchUser();
      }
    },
    methods: {
      fetchEvents () {
        this.status = "loading";
        findEvents({range: this.range})
            .then(this.eventsFetched)
            .catch(this.eventsFailed);
      },
      eventsFetched(response) {
        if (response.errors) {
          throw new Error("Fetch failed");
        }
        this.events = response.data.events;
        this.status = "ready";
      },
      eventsFailed() {
        this.status = "load-failed";
      },
      fetchUser() {
        this.user = auth.getUserInfo();
      },
      ignore(type, name) {
        switch (type) {
          case 'band':
            ignoreBand({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'danceHall':
            ignoreDanceHall({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'city':
            ignoreCity({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'municipality':
            ignoreMunicipality({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'state':
            ignoreState({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
        }
      },
      ignoreSuccess(name) {
        return () => {
          this.fetchEvents();
          this.snackColor = 'success';
          this.snackText = `${name} har dolts`;
          this.snackbar = true;
        }
      },
      ignoreFailed(name) {
        return () => {
          this.snackColor = 'error';
          this.snackText = `${name} kunde inte döljas`;
          this.snackbar = true;
        }
      },
      changeRange(range) {
        this.$router.push(`/?range=${range}`);
      }
    }
  };
</script>

<style lang="scss" scoped>
  /*.container {*/
    /*display: flex;*/
    /*will-change: opacity;*/
    /*padding: 1.5rem 1rem;*/
  /*}*/

  .left {
    padding: 1.5rem 1rem;

    > * {
      margin-bottom: 1.5rem;
    }

    hr {
      border: 0;
      border-top: 1px solid #eaeaea;
    }
  }

  .left,
  .right {
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
  }

  .eventRow {
    margin-bottom: 0.5rem;
  }

  @media screen and(max-width: 1200px) {
    .left {
      width: 40vw;
    }
    .right {
      width: 60vw;
    }
  }

  @media screen and(max-width: 1024px) {
    .left {
      width: 50vw;
    }
    .right {
      width: 50vw;
    }
  }

  @media screen and(min-width: 1200px) {
    .left {
      width: 35vw;
    }
    .right {
      width: 65vw;
    }
  }
</style>
