<script>
    import Mixin from "../mixins/index.js";
    import { mapGetters } from "vuex";
    import dashboard from "../lang/en/dashboard.js";
    import axios from "axios";
    import jsondata from "../assets/json/data.json";
    export default {
      mixins: [Mixin],
      props: ["destionationId", "connectionId", "fbAppCAPIDetails"],
      data() {
        return {
          // lang: this.$lang.dashboard,
          lang: dashboard,
          models:{
            dataSetId:"",
            accessToken:""
          },
          errorMessages: "",
          editFormFlag: false,
          unitTestCaseFlag: false,
          data: jsondata,
        };
      },
      computed: {
        ...mapGetters({
          loading: "loading",
          focusInput: "focusInput",
          clientProjectId: "clientProjectId",
          projectName: "projectName",
          userEmail: "userEmail",
        }),
      },
      // mounted(){
      //   alert(this.destionationId)
      // },
      watch: {
        focusInput(val) {
          if (val) {
            let self = this;
            self.$refs.dataSetId.focus();
            self.$refs.fbAppCapiForm.reset();
          }
        },
        fbAppCAPIDetails(val) {
          if (val) {
            this.showFbAppCapiDetails();
            this.addSourceConnection("", this.connectionId, this.destionationId);
          }
        },
      },
      methods: {
        getIconUrl(icon) {
          return require("../assets/styles/img/icons/" + icon);
        },
        getValidationState({ dirty, validated, valid = null }) {
          return dirty || validated ? valid : null;
        },
        //on submit validate and finish
        onSubmitFbApp() {
          let self = this;
          if (self.editFormFlag) {
            self.$store.commit("setFocus", false);
            self.addSourceConnection("", this.connectionId, this.destionationId);
            self.togglePopup(this.destionationId, "", "", "false");
          } else {
            self.errorMessages = "";
            let data = {
              cp_id: self.clientProjectId,
              fb_ds_id: self.models.dataSetId,
              fb_ac_t: self.models.accessToken,
              project_name: self.projectName,
            };
            let dispatchApiUrl = self.$store.dispatch;
            if (self.unitTestCaseFlag) {
              dispatchApiUrl = axios.post;
            }
            dispatchApiUrl("fbAppCapiDestinationSetup", data).then((response) => {
              if (response.status == 200 || response.status == 201) {
                self.$emit("loadDestinationDetails");
              } else {
                self.$store.commit("setLoading", false);
                self.errorMessages = response.data.message;
              }
            });
          }
        },
    
        //to show details when connection already done
        showFbAppCapiDetails() {
          let self = this;
         self.models.dataSetId = self.fbAppCAPIDetails.fbDatasetId;
         self.models.accessToken = self.fbAppCAPIDetails.fbAcT;
          self.editFormFlag = true;
        },
        onClose() {
          this.togglePopup(this.destionationId, "", "", "false");
        },
      },
    };
    </script>


<template>
    <!-- Facebook App -->
    <div>
      <div class="dh-popover-holder position-relative">
      
      <div id="fbAppCapi-2" class="dh-popover text-start">
        <ValidationObserver ref="fbAppCapiForm" v-slot="{ passes }">
          <b-form
            @submit.stop.prevent="passes(onSubmitFbApp)"
            autocomplete="off"
          >
            <div class="dh-popover__head">
              <label>{{ lang.label.fbAppCapiInfo.dataConnection }}</label>
              <button class="btn" type="button" @click="onClose()">
                <em class="fas fa fa-times"></em>
              </button>
            </div>
            <div class="dh-popover__body">
              <b-alert
                class="col-sm-12"
                v-if="errorMessages"
                variant="danger"
                show
                dismissible
                fade
                >{{ errorMessages }}</b-alert
              >
              <label class="mb-1 d-flex align-items-center">
              {{ lang.label.fbAppCapiInfo.enterDatasetId }}
              <span
                class="
                  helping-tag
                  input-group-text
                  border-0
                  ms-0
                  bg-white
                  position-relative
                "
              >
                <img :src="getIconUrl('q.svg')" alt="q" />
                <div class="helping-tag__hover bg-white rounded p-3 shadow-sm">
                  {{ lang.label.fbAppCapiInfo.accountInfo }}
                </div>
              </span>
            </label>
            <div class="input-group mb-3">
              <ValidationProvider
                :name="lang.label.validation.dataSetId"
                rules="required"
                v-slot="validationContext"
                class="w-100"
              >
                <b-form-input
                  v-model="models.dataSetId"
                  type="text"
                  :state="getValidationState(validationContext)"
                  :placeholder="
                    lang.label.fbAppCapiInfo.placeholderDatasetID
                  "
                  aria-label="Conversion ID"
                  ref="dataSetId"
                  :disabled="editFormFlag"
                  data-unit="dataSetId"
                ></b-form-input>
                <b-form-invalid-feedback>{{
                  validationContext.errors[0]
                }}</b-form-invalid-feedback>
              </ValidationProvider>
            </div>
            <label class="mb-1 d-flex align-items-center">
              {{ lang.label.fbAppCapiInfo.addAccessToken }}
              <span
                class="
                  helping-tag
                  input-group-text
                  border-0
                  ms-0
                  bg-white
                  position-relative
                "
              >
                <img :src="getIconUrl('q.svg')" alt="q"/>
                <div class="helping-tag__hover bg-white rounded p-3 shadow-sm">
                  {{ lang.label.fbAppCapiInfo.accessTokenInfo }}
                </div>
              </span>
            </label>
            <div class="input-group mb-3">
              <ValidationProvider
                :name="lang.label.validation.accessToken"
                rules="required|alpha_dash"
                v-slot="validationContext"
                class="w-100"
              >
                <b-form-input
                  v-model="models.accessToken"
                  type="text"
                  :state="getValidationState(validationContext)"
                  :placeholder="
                    lang.label.fbAppCapiInfo.placeholderAddAccessToken
                  "
                  aria-label="Conversion ID"
                  :disabled="editFormFlag"
                  data-unit="accessToken"
                ></b-form-input>
                <b-form-invalid-feedback>{{
                  validationContext.errors[0]
                }}</b-form-invalid-feedback>
              </ValidationProvider>
            </div>
            </div>
            <div class="dh-popover__footer text-end">
              <button
                id="fbApp1"
                v-if="editFormFlag"
                class="dh-btn dh-btn--main m-0"
              >
                {{ lang.label.buttons.close }}
              </button>
              <button
                id="fbApp2"
                class="dh-btn dh-btn--main m-0"
                type="submit"
                v-else
              >
                {{ lang.label.buttons.finish }}
              </button>
            </div>
          </b-form>
        </ValidationObserver>
      </div>
      </div>
    </div>
  </template>

<style>

</style>