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

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

        <!-- Expiration Period -->
        <ion-item>
          <p class="intro">{{description}}</p>
        </ion-item>
        <ion-item>
          <ion-label class="period-label">Period</ion-label>
          <ion-select placeholder="Select Expiration" v-on:ionChange="onSelectExpiration($event.target.value)" :value="selectedExpiration.value" interface="popover">
            <ion-select-option v-for="expiration in expirations" :key="expiration.value" :value="expiration.value">
              {{expiration.display_name}}
            </ion-select-option>
          </ion-select>
        </ion-item>

        <!-- Activity Date/Time -->
        <ion-item v-if="!withoutActivityDateTime">
          <p class="intro">If you know when your activity will take place, share it here. We will use it to find the best matches for you.</p>
        </ion-item>
        <ion-item v-if="!withoutActivityDateTime">
          <ion-label class="period-label">Activity Date/Time</ion-label>
          <ion-datetime 
            ref="dateTimePicker" display-format="D MMM YYYY H:mm" :min="currentDateTime" max="2022" placeholder="Select Date/Time" 
            minute-values="0,15,30,45" :value="activityDateTime" v-on:ionChange="onActivityDateTimeChange($event.target.value)"
          />
        </ion-item>
        <span v-if="!withoutActivityDateTime && activityDateTime" class="clear-button" @click="() => {onActivityDateTimeChange(null); $refs.dateTimePicker.value = null}">Clear</span>

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

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

export default {
  name: 'ModalWithPadding',
  components: {
    RecoModal
  },
  watch: {
    selectedGender() {
      console.log(this.selectedGender);
    }
  },
  props: {
  	title: {
  		type: String,
  		default: "Post Expiration"
  	},
    description: {
      type: String,
      default: "Select how long you want your post to be shown. We will hide it after the selected period."
    },
    withoutActivityDateTime: {
      type: Boolean,
      default: false
    },
    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}
        ];
      }
    },
    selectedExpiration: {
      type: Object,
      default() {
        return {value: "one_day", display_name: "One Day", seconds: 86400};
      }
    },
    activityDateTime: {
      default: null
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
  },
  data() {
    return {
      currentDateTime: moment().format('YYYY-MM-DDTHH:mmZ'),
    };
  },
}
</script>

<style scoped lang="css">
  .loc-item {
    font-size: 16px;
  }
  .intro {
    font-size: 17px;
    line-height: 28px;
  }
  .period-label {
    padding: 8px 0;
  }
  .loc-ranger {
    --bar-height: 2px;
  }
  .clear-button {
    display: inline-block;
    float: right;
    position: relative;
    padding: 3px 15px;
    color: var(--ion-color-primary);
  }
  .clear-button:active {
    top: 2px;
  }
</style>