<template>

  <reco-modal 
    v-on:backButtonClicked="backButtonClicked"
    :withBackButton="true" 
    v-on:doneButtonClicked="clearFiltersClicked"
    :withDoneButton="true"
    doneButtonText="Clear"
    title="Filter Forum">

    <!-- Menu sections -->  
    <ion-content slot="content">
      <ion-list lines="none">

          <!-- Select Location -->
          <ion-item-divider class="loc-content mid-divider"></ion-item-divider>
          <ion-item class="loc-item">
            <ion-label class="loc-label">Distance</ion-label>
            <ion-select placeholder="Select Distance" v-on:ionChange="onSelectDistance($event.target.value)" :value="distance.value" interface="popover">
              <ion-select-option v-for="d in distances" :key="d.value" :value="d.value">
                {{d.display_name}}
              </ion-select-option>
            </ion-select>
          </ion-item>

          <!-- Select Posted At -->
          <!-- ion-item-divider class="loc-content mid-divider"></ion-item-divider>
          <ion-item class="loc-item">
            <ion-label class="loc-label">Posted at</ion-label>
            <ion-select placeholder="Select Post Age" v-on:ionChange="onSelectExpiration($event.target.value)" :value="expiration.value" interface="popover">
              <ion-select-option v-for="e in expirations" :key="e.value" :value="e.value">
                {{e.display_name}}
              </ion-select-option>
            </ion-select>
          </ion-item -->

          <!-- Select Age -->
          <ion-item-divider class="loc-content mid-divider"></ion-item-divider>
          <ion-item class="loc-item">
            <ion-label class="range-label">Age</ion-label>
            <ion-select 						
                v-on:ionChange="onChangeAgeLower($event.target.value)"  
                v-on:ionBlur="age = {lower: parseInt($event.target.value, 10), upper: locAge.upper}"   
                :value="locAge.lower"              
                interface="popover">
                <ion-select-option 
									v-for="ageItem in ageList" 
									:key="ageItem" 
									:value="ageItem">
									{{ageItem}}
								</ion-select-option>
              </ion-select>

            <ion-range 
              ref="ageIonRange" dual-knobs="true" min="18" max="99" step="1" 
              class="loc-ranger"                         
              v-on:ionChange="($event) => onChangeAge($event.detail.value)"
              v-on:ionBlur="age = locAge">  
              </ion-range>

              <ion-select 						
                v-on:ionChange="onChangeAgeUpper($event.target.value)" 
                v-on:ionBlur="age = {lower: locAge.lower , upper: parseInt($event.target.value, 10)}" 
                :value="locAge.upper"              
                interface="popover">
                <ion-select-option 
									v-for="ageItem in ageList" 
									:key="ageItem" 
									:value="ageItem">
									{{ageItem}}
								</ion-select-option>
              </ion-select>
          </ion-item>

          <!-- Select gender -->
          <ion-item-divider class="loc-content mid-divider"></ion-item-divider>
          <ion-item class="loc-item">
            <ion-label class="loc-label">Gender</ion-label>
            <ion-select 
              placeholder="Select Gender" 
              v-on:ionChange="gender = genders.find(gen => gen.value === $event.target.value)" 
              :value="gender.value" interface="popover">
              <ion-select-option 
                v-for="gender in genders" 
                :key="gender.value" 
                :value="gender.value">
                {{gender.display_name}}
              </ion-select-option>
            </ion-select>
          </ion-item>

      </ion-list>
    </ion-content>

  </reco-modal>
</template>

<script lang="ts">
import animations from '@/animations';
import RecoModal from '@/components/complex/RecoModal.vue';

export default {
  components: {
    RecoModal,
  },
  props: {
    side: {
      type: String,
      default: "end",
    },
    menuId: {
      type: String,
      default: "recoPostFilters",
    },
    type: {
      type: String,
      default: "mainFeed",
    },
    padding: {
      type: Boolean,
      default: true,
    },
    closeMenu: {
      type: Boolean,
      default: false,
    },
    genders: {
      type: Array,
      default() {
        return [
          {value: "all", display_name: "All"},
          {value: "male", display_name: "Male"},
          {value: "female", display_name: "Female"},
        ];
      }
    },
    distances: {
      type: Array,
      default() {
        return [
          // {value: "50_meters", display_name: "50 m", meters: 50},
          // {value: "100_meters", display_name: "100 m", meters: 100},
          // {value: "300_meters", display_name: "300 m", meters: 300},
          {value: "500_meters", display_name: "500 m", meters: 500},
          {value: "1_km", display_name: "1 km", meters: 1000},
          {value: "3 kms", display_name: "3 km", meters: 3000},
          {value: "5 kms", display_name: "5 km", meters: 5000},
          {value: "10 kms", display_name: "10 km", meters: 10000},
          {value: "infinite", display_name: "∞ km", meters: 100000000},
        ];
      },
    },
    expirations: {
      type: Array,
      default() {
        return [
          {value: "half_an_hour", display_name: "30 min", seconds: 1800},
          {value: "one_hour", display_name: "1 h", seconds: 3600},
          {value: "three_hour", display_name: "3 h", seconds: 10800},
          {value: "six_hour", display_name: "6 h", seconds: 21600},
          {value: "twelve_hours", display_name: "12 h", seconds: 43200},
          {value: "one_day", display_name: "1 day", seconds: 86400},
          {value: "three_days", display_name: "3 days", seconds: 259200},
          {value: "seven_days", display_name: "1 week", seconds: 604800},
          {value: "forever", display_name: "All", seconds: 9999999999}
        ];
      }
    },
    filters: {
      type: Object,
    },
  },
  data() {
    return {
      // filters
      distance: this.filters.distance,
      gender: this.filters.gender,
      age: this.filters.age,

      // helpers
      locAge: this.filters.age,
      modalOpened: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.$refs.ageIonRange.value = this.age;
    }, 500);
  },
  watch: {
    distance() {
      if (this.isSubmittable) {
        this.distanceChanged(this.distance);
      }
    },
    gender() {
      if (this.isSubmittable) {
        this.genderChanged(this.gender);
      }
    },
    age() {
      if (this.isSubmittable && this.$refs.ageIonRange) {
        this.ageChanged(this.age);
      }
    },
    filters: {
      deep: true,
      handler() {
        // filters
        console.log('FILTERS FROM RECOMPONENTS: ', this.filters);
        this.distance = this.filters.distance;
        this.gender = this.filters.gender;
        this.age = this.filters.age;
        this.locAge = this.filters.age;
      }
    },
  },
  computed: {
    /* decides whether the filters are valid */
    isSubmittable() {
      return true;
    },
      ageList(){
      let list = [];
      for(let i = 18; i <= 99; i++){
        list.push(i);
      }
      return list;
    }
  },
  methods: {
    /* on age is selected */
    onChangeAge(val) {
      this.locAge = val;
      if(this.$refs.ageIonRange){
        this.$refs.ageIonRange.value = val;
      }
    },

    onChangeAgeLower(lower){
      let newAge = {lower: parseInt(lower, 10), upper: this.locAge.upper};
      this.updateAgeProp(newAge);    
    },

    onChangeAgeUpper(upper){
      let newAge = {lower: this.locAge.lower, upper: parseInt(upper, 10)};  
      this.updateAgeProp(newAge);    
    },

    updateAgeProp(newAge){
      this.locAge = newAge;
      if(this.$refs.ageIonRange){
        this.$refs.ageIonRange.value = newAge;
      }
      this.age = newAge;
    },

    /* on select distance */
    onSelectDistance(val) {
      this.distance = this.distances.find(distance => distance.value === val);
    },

    closeFilters() {
      this.$refs.recoPostFilters.close();
    }
  }
}
</script>

<style scoped lang="css">
  .loc-content {
    --background: #fff;
  }
  .loc-item {
    --padding-top: 10px;
    --padding-bottom: 10px;
  }
  .loc-row {
    padding: 4px 0;
  }
  .loc-row-one-line {
    padding: 9px 0;
  }
  .loc-row-with-input {
    padding: 2px 0;
  }
  .loc-col {
    padding: 3px;
  }
  ion-select {
    color: #ED1656;
    font-weight: 500;
  }
  .placeholder {
    font-size: 16px;
    color: var(--reco-lighter-font-color);
  }
  .value {
    font-size: 15px;
    font-weight: 600;
  }
  .placeholder .secondary,
  .value .secondary {
    font-size: 13px;
    color: var(--reco-lighter-font-color);
  }
  .icon-container {
    display: inline-block;
    width: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 18px;
    color: #fff;
    background: red;
  }
  .icon-container.inline {
    margin: 10px 15px 10px 0;
  }
  .right-arrow {
    font-size: 26px;
    color: var(--reco-lighter-font-color);
  }
  .motto-input {
    width: 100%;
    line-height: 24px;
    font-size: 16px;
  }
  .description-input {
    width: 100%;
    line-height: 18px;
    resize: none;
    font-size: 16px;
  }
  .advanced-settings-button {
    font-size: 16px;
    color: var(--ion-color-primary);
  }
  .settings-grid {
    font-size: 14px;
  }
  .section-title {
    font-size: 16px;
    text-transform: uppercase;
    padding: 14px 0 10px 0;
  }
  .section-title.last {
    padding: 9px 0 10px 0;
  }
  .section-ul {
    padding-left: 20px;
    line-height: 26px;
    margin-top: 5px;
    width: 100%;
  }
  .edit-icon {
    position: relative;
    top: 1px;
    margin-left: 3px;
    float: right;
  }
  .mid-divider {
    min-height: 10px;
  }
  .loc-ranger {
    --bar-height: 2px;
  }
  ion-range {
    --bar-background-active: #ED1656;
  }
  .loc-label {
    padding: 5px 0;
    font-weight: 500;
  }
  .range-label {
    font-weight: 500;
  }
</style>
