<template>
  <reco-modal 
    v-on:backButtonClicked="doneButtonClicked" 
    :withBackButton="true" 
    :withDoneButton="false"
    :title="title">

    <ion-content slot="content">
      <ion-list lines="full">

        <ion-item>
          <p class="intro">{{description}}</p>
        </ion-item>

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

        <ion-item v-if="!withoutDevLocation">
          <p class="intro">Select a fake location for this post. This feature is ony available in development mode.</p>
        </ion-item>

        <ion-item v-if="!withoutDevLocation">
          <ion-label class="loc-label">Location</ion-label>
          <ion-select placeholder="Select Location" v-on:ionChange="onSelectDevLocation($event.target.value)" :value="selectedDevLocation.value">
            <ion-select-option v-for="location in devLocations" :key="location.value" :value="location.value">
              {{location.display_name}}
            </ion-select-option>
          </ion-select>
        </ion-item>

      </ion-list>
    </ion-content>
  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';

export default {
  name: 'RecoSelectLocation',
  components: {
    RecoModal
  },
  props: {
    title: {
      type: String,
      default: "Visibility Distance"
    },
    description: {
      type: String,
      default: "Set up how far your post should be visible from your current location."
    },
    withoutDevLocation: {
      type: Boolean,
      default: false
    },
    distances: {
      type: Array,
      default() {
        return [
          // {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},
        ];
      },
    },
    devLocations: {
      type: Array,
      default() {
        return [
          {value: "none", display_name: "None"},
          {value: "bosnyak_ter", display_name: "Bosnyák Tér", location: {lat: 47.519287, long: 19.112707}},
          {value: "keleti_palyaudvar", display_name: "Keleti Pályaudvar", location: {lat: 47.519287, long: 19.112707}},
          {value: "deak_ter", display_name: "Deák Ferenc Tér", location: {lat: 47.498255, long: 19.054278}},
          {value: "opera", display_name: "Opera", location: {lat: 47.502942, long: 19.058318}},
          {value: "parlament", display_name: "Parlament", location: {lat: 47.507324, long: 19.045701}},
          {value: "erzsebet_ter", display_name: "Erzsébet Tér", location: {lat: 47.497827, long: 19.052744}},
          {value: "vorosmarty_ter", display_name: "Vörösmarty Tér", location: {lat: 47.496877, long: 19.050763}},
          {value: "ferihegy", display_name: "Ferihegy", location: {lat: 47.433093, long: 19.261372}},
          {value: "kelenfold", display_name: "Kelenföld", location: {lat: 47.466175, long: 19.032566}},
          {value: "astoria", display_name: "Astoria", location: {lat: 47.494380, long: 19.060595}},
          {value: "blaha", display_name: "Blaha Lujza Tér", location: {lat: 47.496504, long: 19.069675}},
          {value: "oktogon", display_name: "Oktogon", location: {lat: 47.505443, long: 19.063375}},
          {value: "csomor", display_name: "Csömör", location: {lat: 47.548867, long: 19.225576}},
          {value: "godollo", display_name: "Gödöllő", location: {lat: 47.598588, long: 19.356659}},
          {value: "erd", display_name: "Érd", location: {lat: 47.392098, long: 18.906746}},
        ];
      }
    },
    selectedDistance: {
      type: Object,
      default() {
        return {value: "3 kms", display_name: "3 kms", meters: 3000};
      }
    },
    selectedDevLocation: {
      type: Object,
      default() {
        return {value: "none", display_name: "None"};
      }
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
  },
}
</script>

<style scoped lang="css">
  .loc-item {
    font-size: 16px;
  }
  .intro {
    font-size: 17px;
    line-height: 28px;
  }
  .loc-label {
    padding: 8px 0;
  }
</style>