<template>
  <q-page class="container" v-if="loaded">
    <flight-toolbar
      :departure="departureCity"
      :arrival="arrivalCity"
    />
    <q-page-sticky position="top-right" :offset="[15, 13]">
      <q-fab flat icon="tune" direction="left">
        <q-fab-action color="secondary" icon="attach_money" glossy>
          <q-popup-edit
            @save="setPrice"
            title="Max Price filter"
            buttons
            v-model="maxPriceFilter"
          >
            <q-slider
              color="secondary"
              :min="minimumPrice"
              :max="maximumPrice"
              label
              label-always
              v-model="maxPriceFilter"
            />
          </q-popup-edit>
        </q-fab-action>
        <q-fab-action color="secondary" icon="schedule" glossy>
          <q-popup-edit title="Schedule filter">
            <q-datetime
              type="time"
              format24h
              format="HH:mm"
              format-model="date"
              placeholder="Depart at"
              clearable
              @input="setDeparture"
              v-model="departureTimeFilter"
            />
            <q-datetime
              type="time"
              format24h
              format="HH:mm"
              format-model="date"
              placeholder="Arrive by"
              clearable
              @input="setArrival"
              v-model="arrivalTimeFilter"
            />
          </q-popup-edit>
        </q-fab-action>
        <q-fab-action
          color="secondary"
          icon="cancel"
          @click="filteredFlights = flights"
          glossy
        />
      </q-fab>
    </q-page-sticky>
    <div class="heading">
      <div class="q-headline text-primary text-center">Select your flight</div>
    </div>
    <div class="flight__results">
      <router-link
        :to="{
          name: 'selectedFlight',
          params: { id: flight.flightNumber, flight: flight }
        }"
        v-for="flight in filteredFlights"
        :key="flight.id"
      >
        <flight :details="flight" />
      </router-link>
    </div>
  </q-page>
</template>

<script>
import { mapState } from "vuex";
import FlightToolbar from "../components/FlightToolbar";
import Flight from "../components/Flight";

import { priceFilter, scheduleFilter } from "../mixins/filters";
import { priceSorter, scheduleSorter } from "../mixins/sorters";

export default {
  name: "FlightResults",

  components: {
    Flight,
    FlightToolbar
  },

  mixins: [priceFilter, scheduleFilter, priceSorter, scheduleSorter],

  created() {
    this.$store.dispatch("catalog/fetch");
  },

  data() {
    return {
      filteredFlights: [],
      departureTimeFilter: "",
      arrivalTimeFilter: "",
      maxPriceFilter: 500
    };
  },

  methods: {
    setPrice() {
      let flights = this.filterByMaxPrice(this.flights, this.maxPriceFilter);
      flights = this.sortByPrice(flights);
      this.filteredFlights = flights;
    },

    setDeparture() {
      let flights = this.filterBySchedule(this.flights, {
        departure: this.departureTimeFilter
      });

      flights = this.sortByDeparture(flights);

      this.filteredFlights = flights;
    },

    setArrival() {
      this.filteredFlights = this.filterBySchedule(this.flights, {
        arrival: this.arrivalTimeFilter
      });
    }
  },

  computed: {
    ...mapState({
      flights: state => state.catalog.flights
    }),

    loaded: function() {
      if (this.flights.length) {
        this.$q.loading.hide();
      } else {
        this.$q.loading.show();
      }

      // this.filteredFlights = this.sortByDeparture(this.flights);
      this.filteredFlights = this.flights;

      return !!this.flights;
    },

    departureCity: function() {
      // if (this.flights) {
      //   return this.flights.departureCity;
      // }

      return null;
    },

    arrivalCity: function() {
      // if (this.flights) {
      //   return this.flights.departureCity;
      // }

      return null;
    },

    maximumPrice: function() {
      return Math.max(...this.flights.map(filter => filter.ticketPrice), 1);
    },

    minimumPrice: function() {
      return Math.min(...this.flights.map(filter => filter.ticketPrice), 1);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~variables'

.heading
  margin-top 5.5rem
</style>