<template>
  <b-container fluid class="h-100 p-5">
    <div class="h-100 ve-bgw-1 ve-border">
      <vue-perfect-scrollbar class="scroll-area">
        <b-container class="p-20">
          <b-row>
            <b-col cols="3">
              <div class="text-center pB-20">
                <span class="h4 fw-400" v-if="$route.name != 'spacemessagecompose'">Template Detail</span>
                <span class="h4 fw-400" v-else>Message Detail</span>
              </div>
              <div class="mx-auto" v-if="$route.name != 'spacemessagecompose'">
                <div class="avatar-upload">
                  <div class="avatar-edit-box">
                    <input
                      type="file"
                      id="tempimageUpload"
                      accept=".png, .jpg, .jpeg"
                      @change="onFileSlected($event)"
                    />
                    <label for="tempimageUpload"></label>
                  </div>
                  <div v-if="templateDetails.imageData==null">
                    <div v-if="templateDetails.url == ''">
                      <b-img
                        fluid
                        src="https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1554181778740-download.jpg"
                        alt="Thumbnail"
                        class="avatar-preview-box"
                      />
                    </div>
                    <div v-else>
                      <b-img
                        fluid
                        :src="templateDetails.url"
                        alt="Thumbnail"
                        class="avatar-preview-box"
                      />
                    </div>
                  </div>
                  <div v-else>
                    <b-img
                      fluid
                      :src="templateDetails.imageData"
                      alt="Thumbnail"
                      class="avatar-preview-box"
                    />
                  </div>
                </div>
              </div>
              <div class="pY-10 pX-20" v-if="templateDetails.channelSelect">
                <b-form-group>
                  <b-form-checkbox-group
                    v-model="templateDetails.channelSelect"
                    :options="templateDetails.channelOption"
                    switches
                    stacked
                  ></b-form-checkbox-group>
                </b-form-group>
              </div>
            </b-col>
            <b-col>
              <b-form>
                <b-row>
                  <b-col>
                    <!-- {{templateDetails.channelSelect.find(Email)}} -->
                    <div v-if="templateDetails.channelSelect">
                      <div class="detail-feature pointer option-head">E-mail Feature</div>
                      <div class="form-group mY-10">
                        <b-input
                          type="text"
                          id="subject"
                          v-model="templateDetails.emailSubject"
                          required
                        ></b-input>
                        <span for="subject" class="form-control-placeholder">E-mail Subject</span>
                      </div>
                    </div>
                  </b-col>
                  <b-col>
                    <div v-if="templateDetails.channelSelect">
                      <div class="detail-feature pointer option-head">SMS Feature</div>
                      <div class="mY-10" style="display: flex">
                        <b-form-radio-group
                          id="radio-group-2"
                          v-model="templateDetails.isreply"
                          name="radio-sub-component"
                        >
                          <b-form-radio value="true">Reply</b-form-radio>
                          <b-form-radio
                            :value="templateDetails.isreply == 'true' ? selected : templateDetails.isreply"
                          >No Reply</b-form-radio>
                        </b-form-radio-group>
                        <div v-if="templateDetails.isreply != 'true'">
                          <b-form-select
                            v-model="templateDetails.isreply"
                            :options="smsOption"
                            size="sm"
                          ></b-form-select>
                        </div>
                        <!-- <b-form-checkbox v-model="templateDetails.isreply" switches stacked>
                          <span style="color: rgb(100, 100, 100)">Reply</span>
                        </b-form-checkbox>-->

                        <!-- <b-form-radio v-model="templateDetails.isreply" switches stacked></b-form-radio> -->
                      </div>
                    </div>
                  </b-col>
                </b-row>
                <b-form-group
                  class="mY-10"
                  v-if="$route.name == 'templatecreate' || ($route.name == 'templateedit'  && $route.params.templateid) || $route.name == 'liveformCreate' || $route.params.workflowId || $route.name == 'space_design_event' || $route.params.eventid"
                >
                  <b-input
                    id="name"
                    class="form-control"
                    v-model="templateDetails.name"
                    type="text"
                    required
                  ></b-input>
                  <span for="name" class="form-control-placeholder">Template Name</span>
                </b-form-group>
                <b-form-group
                  class="mY-10"
                  v-if="$route.name == 'templatecreate' || ($route.name == 'templateedit'  && $route.params.templateid) || $route.name == 'liveformCreate' || $route.params.workflowId || $route.name == 'space_design_event' || $route.params.eventid"
                >
                  <b-textarea
                    id="description"
                    class
                    v-model="templateDetails.description"
                    rows="3"
                    max-rows="3"
                    required
                  ></b-textarea>
                  <span for="description" class="form-control-placeholder">Description</span>
                </b-form-group>
                <b-form-group class="mY-10" v-if="templateDetails.channelSelect">
                  <multiselect
                    id="conatctsget"
                    v-model="templateDetails.groupMemberList"
                    :custom-label="customLabel"
                    track-by="mri"
                    tag-placeholder="External Contacts"
                    placeholder
                    :multiple="true"
                    :taggable="true"
                    :options="contacts"
                    @tag="addTag"
                    :searchable="true"
                    @search-change="findContacts"
                    :hide-selected="true"
                    class="addcontact line-input"
                  ></multiselect>
                  <span for="conatctsget" class="form-control-placeholder">To List</span>
                </b-form-group>
                <b-form-group
                  class="mY-10"
                  v-if="$route.name == 'liveformCreate' || $route.params.workflowId"
                >
                  <b-form-select v-model="templateDetails.live" :options="liveoptions"></b-form-select>
                </b-form-group>
              </b-form>
            </b-col>
          </b-row>
        </b-container>
      </vue-perfect-scrollbar>
    </div>
  </b-container>
</template>

<script>
import Multiselect from "vue-multiselect";

import deleteApi from "@/apis/deleteApi";
import getApi from "@/apis/getApi";
import postApi from "@/apis/postApi";
import putApi from "@/apis/putApi";

export default {
  components: {
    Multiselect
  },
  props: {
    templateDetails: Object
  },
  data() {
    return {
      contacts: [],
      liveoptions: [
        {
          value: true,
          text: "Live"
        },
        {
          value: false,
          text: "Not Live"
        }
      ],
      selected: "iits",
      smsOption: [{ value: "iits", text: "iits" }]
    };
  },
  created() {
    if (
      this.$store.state.companySettings.companyConfig.settings.SMSNoReply
        .nameValues != undefined
    ) {
      var optionList = this.$store.state.companySettings.companyConfig.settings.SMSNoReply.nameValues.map(
        elem => {
          return { value: elem.name, text: elem.name };
        }
      );
      // console.log(optionList);
      this.smsOption = this.smsOption.concat(optionList);
    }
  },
  methods: {
    customLabel(contact) {
      if (contact.name != null && contact.email != null) {
        return `${contact.name}<${contact.email}>`;
      } else if (contact.name != null && contact.mobile != null) {
        return `${contact.name}<${contact.mobile}>`;
      } else {
        return `${contact.name}`;
      }
      console.log(contact);
    },
    onFileSlected(event) {
      if (event.target.files && event.target.files[0]) {
        this.selectFile = event.target.files[0];
        var reader = new FileReader();
        reader.onload = e => {
          this.templateDetails.imageData = e.target.result;
          postApi.imageUpload(this.selectFile).then(response => {
            // console.log(response.data[0].files);
            this.templateDetails.url = response.data[0].files;
            console.log(response);
          });
        };
        reader.readAsDataURL(event.target.files[0]);
      }
    },
    addTag(newTag) {
      var intpakphone = /^\+?([0-9]{2})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      var localpakphone = /^\(?([0]{1})\)?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      var standemail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w+)+$/;
      var contactemail = /^\w+([\.-]?\w+)*@contacts.vemessage.com+$/;
      var groupemail = /^\w+([\.-]?\w+)*@groups.dev.vemessage.com+$/;
      if (newTag.match(intpakphone) || newTag.match(localpakphone)) {
        const tag = {
          name: newTag,
          mri: newTag,
          mobile: newTag
        };
        this.templateDetails.groupMemberList.push(tag);
        this.contacts.push(tag);
      } else if (standemail.test(newTag)) {
        const tag = {
          name: newTag,
          mri: newTag,
          email: newTag
        };
        this.templateDetails.groupMemberList.push(tag);
        this.contacts.push(tag);
      } else {
        const arr = newTag.split(",");
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].match(intpakphone) || arr[i].match(localpakphone)) {
            const tag = {
              name: arr[i],
              email: arr[i],
              mri: arr[i]
            };
            this.templateDetails.groupMemberList.push(tag);
            this.contacts.push(tag);
          } else if (standemail.test(arr[i])) {
            const tag = {
              name: arr[i],
              email: arr[i],
              mri: arr[i]
            };
            this.templateDetails.groupMemberList.push(tag);
            this.contacts.push(tag);
          } else {
            this.$toast.warning(
              arr[i] + " this is not Correct E-mail or Phone Number",
              "Alert",
              this.notificationSystem.options.warning
            );
          }
        }
      }
    },
    findContacts(query) {
      getApi.searchContactsandGroup("text1:" + query).then(response => {
        console.log(response);
        if (response.status == 200) {
          this.contacts = response.data;
        } else {
        }
      });
    }
  }
};
</script>

<style>
</style>
