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

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

        <!-- Write Description -->
        <ion-item class="loc-item">
          <ion-textarea 
            ref="descriptionInput" 
            class="loc-input-textarea"
            placeholder="Type your message..." 
            :rows="4" 
            inputmode="text"
            v-on:ionInput="event => locDescription = event.target.value"
            :value="locDescription"
          />
        </ion-item>

        <!-- Distance setting -->
        <ion-item>
          <ion-label class="loc-label">Distance</ion-label>
          <ion-select 
            placeholder="Select Distance" 
            v-on:ionChange="distance = distances.find(dist => dist.value === $event.target.value)" 
            :value="distance.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>

        <!-- Age setting -->
        <ion-item>
          <ion-label class="loc-label">Age</ion-label>
          <ion-range 
            ref="ageIonRange" dual-knobs="true" min="18" max="99" step="1" class="loc-ranger"
            v-on:ionChange="($event) => age = $event.detail.value" :value="locAge">
              <ion-label class="range-label" slot="start">{{age.lower}}</ion-label>
              <ion-label class="range-label" slot="end">{{age.upper}}</ion-label>
            </ion-range>
        </ion-item>

        <!-- Gender setting -->
        <ion-item>
          <ion-label class="loc-label">Gender</ion-label>
          <ion-select 
            placeholder="Select Expiration" 
            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-item>
          <div style="width: 100%; overflow: hidden;">
            <div class="publish-button" @click="doneButtonClicked">Send</div>
          </div>
        </ion-item>

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

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

export default {
  name: 'RecoCreateForumPostDescription',
  components: {
    RecoModal
  },
  watch: {
    locDescription() {
      this.onDescriptionChange(this.locDescription);
    },
    gender(val) {
      this.onVisibilityChange('gender', val);
    },
    age(val) {
      this.onVisibilityChange('age', val);
    },
    distance(val) {
      this.onVisibilityChange('distance', val);
    },
  },
  props: {
    title: {
      type: String,
      default: "Forum Message"
    },
    description: {
      type: String,
      default: "",
    },
    backButtonClicked: {
      type: Function,
      default: () => { return }
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
    withBackButton: {
      type: Boolean,
      default: true,
    },
    withDoneButton: {
      type: Boolean,
      default: false,
    },
    isNextButton: {
      type: Boolean,
      default: false,
    },
    visibility: {
      type: Object
    },
    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_km", display_name: "3 km", meters: 3000},
          {value: "5_km", display_name: "5 km", meters: 5000},
          {value: "10_km", display_name: "10 km", meters: 10000},
          {value: "infinite", display_name: "∞ km", meters: 100000000},
        ];
      },
    },
    genders: {
      type: Array,
      default() {
        return [
          { value: 'all', display_name: 'All' },
          { value: 'male', display_name: 'Male' },
          { value: 'female', display_name: 'Female' }
        ];
      }
    }
  },
  data() {
    return {
      locDescription: this.description,
      gender: this.visibility.gender,
      locType: 'direct',
      age: this.visibility.age,
      locAge: this.visibility.age,
      expiration: this.visibility.expiration,
      distance: this.visibility.distance,
      activityDateTime: this.visibility.activityDateTime,
      maxResponses: this.visibility.maxResponses,
      chatType: this.visibility.chatType,
      automaticResponse: this.visibility.automaticResponse,
    }
  },
  mounted() {
    this.$refs.ageIonRange.value = this.age;
  },
}
</script>

<style scoped lang="css">
  ion-select {
    color: #ED1656;
    font-weight: 500;
  }
  .loc-item {
    font-size: 16px;
  }
  .intro {
    font-size: 17px;
    line-height: 28px;
  }
  .loc-label {
    padding: 5px 0;
    font-weight: 500;
  }
  .range-label {
    font-weight: 500;
  }
  .item-title {
    padding-top: 10px;
    font-weight: bold;
  }
  .item-option {
    font-size: 16px;
    line-height: 22px;
    --inner-padding-bottom: 8px;
    --inner-padding-top: 6px;
  }
  .type-button {
    --background: #eee;
    --color: #888;
  }
  .type-button.active {
    --color: #fff;
  }
  ion-range {
    --bar-background-active: #ED1656;
  }
  .loc-ranger {
    --bar-height: 2px;
  }
  .loc-input {
    --inner-padding-top: 8px;
    --inner-padding-bottom: 8px;
  }
  .loc-input-textarea {
    padding: 8px 0;
  }
  .char-counter {
    color: #636e72;
  }
  .char-counter .chars {
    font-weight: 600;
    color: #455054;
  }
  .char-counter .max-chars {
    font-size: 12px;
  }
  .rt-bubble-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 8px;
  }
  .rt-bubble-container .rt-bubble {
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 45px;
    text-align: center;
    padding: 20px 8px;
    border: 2px solid #343434;
    font-size: 14px;
    font-weight: 600;
  }
  .rt-bubble-container .rt-bubble.active {
    color: #ED1656;
    border: 2px solid #ED1656;
  }
  .num-responders-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 16px 0;
  }
  .num-responders-box .num-responders-button {
    border: 2px solid #343434;
    width: 70px;
    height: 34px;
    line-height: 30px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border-radius: 17px;
  }
  .num-responders-box .num-responders-button.active {
    color: #ED1656;
    border: 2px solid #ED1656;
  }
  .publish-button {
    float: right;
    margin: 20px 0px 20px 5px;
    width: 120px;
    color: #fff;
    line-height: 36px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 10px;
    background: #F72558;
    text-align: center;
    border: 1px solid #F72558;
  }
</style>
