<template>
  <reco-modal 
    v-on:backButtonClicked="doneButtonClicked" 
    :withBackButton="true" 
    :withDoneButton="false"
    :title="title">
    
    <ion-content slot="content">
      
      <ion-list lines="full">

        <!-- Number of Responses -->
        <ion-item>
          <p class="intro">Select how many responses you want to recieve to your post.</p>
        </ion-item>
        <ion-item>
          <ion-label>Responses</ion-label>
          <ion-range 
            ref="responseIonRange" min="1" max="12" step="1" class="loc-ranger"
            v-on:ionChange="($event) => onMaxResponsesChange($event.detail.value)" :value="maxResponses">
              <ion-label slot="end">{{locMaxResponses}}</ion-label>
            </ion-range>
        </ion-item>

        <!-- Number of Responses -->
        <ion-item v-if="locMaxResponses > 1">
          <p class="intro">Do you want to recieve the responses in one group chat or in multiple sinlge chats?</p>
        </ion-item>
        <ion-item v-if="locMaxResponses > 1">
          <ion-label class="chat-type-label">Chat Type</ion-label>
          <ion-select placeholder="Select Chat Type" v-on:ionChange="onSelectChatType($event.target.value)" :value="selectedChatType.value" interface="popover">
            <ion-select-option v-for="chatType in chatTypes" :key="chatType.value" :value="chatType.value">{{chatType.display_name}}</ion-select-option>
          </ion-select>
        </ion-item>

        <!-- Automatic response -->
        <ion-item v-if="locMaxResponses > 1 && selectedChatType.value == 'single'">
          <p class="intro">If you want to reply automatically to any incoming response then write your message here.</p>
        </ion-item>
        <ion-item v-if="locMaxResponses > 1 && selectedChatType.value == 'single'">
          <ion-textarea 
            placeholder="Hello, I am happy to chat with you! Will be back soon." :rows="5" 
            v-on:ionInput="onAutomaticResponseChange($event.target.value)" :value="automaticResponse"
          />
        </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: "Response Settings"
  	},
    chatTypes: {
      type: Array,
      default() {
        return [
          {value: "single", display_name: "Single"},
          {value: "group", display_name: "Group"},
        ];
      }
    },
    selectedChatType: {
      type: Object,
      default() {
        return {value: "single", display_name: "Single"};
      }
    },
    maxResponses: {
      type: Number,
      default: 1,
    },
    automaticResponse: {
      type: String,
      default: "",
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
  },
  data() {
    return {
      locMaxResponses: this.maxResponses,
    }
  },
  mounted() {
    this.$refs.responseIonRange.value = this.maxResponses;
  }
}
</script>

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