<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="gender-label">Gender</ion-label>
          <ion-select 
            placeholder="Select Gender" 
            v-on:ionChange="onSelectGender($event.target.value)" 
            :value="selectedGender.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-item>
          <ion-label>Age</ion-label>
          <ion-range 
            ref="ageIonRange" dual-knobs="true" min="18" max="99" step="1" class="loc-ranger"
            v-on:ionChange="($event) => onChangeAge($event.detail.value)" :value="age">
              <ion-label slot="start">{{locAge.lower}}</ion-label>
              <ion-label slot="end">{{locAge.upper}}</ion-label>
            </ion-range>
        </ion-item>
      </ion-list>
    </ion-content>

  </reco-modal>
</template>

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

export default {
  name: 'ModalWithPadding',
  components: {
    RecoModal
  },
  props: {
  	title: {
  		type: String,
  		default: "Select Audience"
  	},
    description: {
      type: String,
      default: "Select the gender and the age of the people who can see your post. It will not appear to anyone else."
    },
    genders: {
      type: Array,
      default() {
        return [
          {value: "all", display_name: "All"},
          {value: "male", display_name: "Male"},
          {value: "female", display_name: "Female"},
        ];
      }
    },
    selectedGender: {
      type: Object,
      default() {
        return {value: "all", display_name: "All"};
      }
    },
    age: {
      type: Object,
      default() {
        return {lower: 18, upper: 99};
      }
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
  },
  data() {
    return {
      locAge: this.age,
    }
  },
  mounted() {
    this.$refs.ageIonRange.value = this.age;
  }
}
</script>

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