<template>
  <div class="height-set workflow-edit-modal">
    <div class="spinner-main">
      <Loader :loading="widgetLoading"> </Loader>
    </div>
    <div class="row d-flex justify-content-between" v-if="!widgetLoading">
      <h4 class="mb-3">{{ AddUser ? "Add" : "Update" }} User Management</h4>
      <b-form @submit.prevent="formSubmit">
        <div class="row mb-4">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title mb-3">User's Personal Information</h5>
                <h6 class="card-subtitle mb-4 card-title-desc">
                  {{ AddUser ? "Add" : "Update" }} user's personal information
                </h6>

                <!-------------Created On-------------------->
                <div class="row" v-if="!AddUser">
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Created On :"
                      label-for="formrow-firstname-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-group
                        class="mb-3 grey-clolr"
                        :label="created_on"
                        label-for="formrow-firstname-input"
                        label-class="font-weight-normal"
                      />
                    </b-form-group>
                  </div>

                  <!-------------Updated On-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Updated On :"
                      label-for="formrow-lastname-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-group
                        class="mb-3 grey-clolr"
                        :label="updated_on"
                        label-for="formrow-firstname-input"
                        label-class="font-weight-normal"
                      />
                    </b-form-group>
                  </div>

                  <!-------------Role-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="SID :"
                      label-for="formrow-role-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-group
                        class="mb-3 grey-clolr"
                        :label="sid"
                        label-for="formrow-firstname-input"
                        label-class="font-weight-normal"
                      />
                    </b-form-group>
                  </div>
                </div>

                <!-------------First Name-------------------->
                <div class="row">
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your First Name: *"
                      label-for="formrow-firstname-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-firstname-input"
                        type="text"
                        placeholder="First Name"
                        v-model="form.firstname"
                        name="widgetfirstname"
                        :class="{
                          'is-invalid': submitted && v$.form.firstname.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && v$.form.firstname.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>

                  <!-------------Last Name-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your Last name: *"
                      label-for="formrow-lastname-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-lastname-input"
                        type="text"
                        placeholder="Last name"
                        v-model="form.lastname"
                        name="widgetlastname"
                        :class="{
                          'is-invalid': submitted && v$.form.lastname.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && v$.form.lastname.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>

                  <!-------------Role-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Select your role: *"
                      label-for="formrow-role-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-select
                        class="form-select form-select-sm"
                        v-model="form.role"
                        size="sm"
                        placeholder="Role"
                        :options="roleOptions"
                        style="height: 36px"
                        :class="{
                          'is-invalid': submitted && v$.form.role.$error,
                        }"
                      ></b-form-select>
                      <div
                        v-if="submitted && v$.form.role.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>
                </div>

                <div class="row">
                  <!-------------Email-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Enter your Email: *"
                      label-for="formrow-email-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-email-input"
                        type="text"
                        placeholder="Email"
                        v-model="form.email"
                        name="widgetemail"
                        :class="{
                          'is-invalid': submitted && v$.form.email.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && v$.form.email.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>

                  <!-------------Phone number-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your phone number: *"
                      label-for="formrow-phone-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-phone-input"
                        type="text"
                        placeholder="Phone Number"
                        v-model="form.phone"
                        name="widgetphone"
                        :class="{
                          'is-invalid': submitted && v$.form.phone.$error,
                        }"
                      ></b-form-input>
                      <!-- <div
                        v-if="submitted && v$.form.phone.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div> -->

                      <div
                        v-if="submitted && v$.form.phone.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="v$.form.phone.minLength"
                          >Phone number must be at least 10 characters long.</span
                        >
                        <span v-if="v$.form.phone.maxLength"
                          >and cannot exceed 15 characters.</span
                        >
                      </div>
                    </b-form-group>
                  </div>

                 
                  <!-------------Extension-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your Extension Number:"
                      label-for="formrow-extension-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-extension-input"
                        type="text"
                        placeholder="Extension"
                        v-model="form.extension"
                        name="widgetextension"
                        @input="validateInput"
                        :class="{
                          'is-invalid': submitted && errorMessage,
                        }"
                      ></b-form-input>
                      <div v-if="errorMessage"  class="error-message">{{ errorMessage }}</div>

                    </b-form-group>
                  </div>
                </div>

                <div class="row">
                  <!-------------Department-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your department name:"
                      label-for="formrow-department-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-department-input"
                        type="text"
                        placeholder="Department"
                        v-model="form.department"
                        name="widgetdepartment"
                      ></b-form-input>
                    </b-form-group>
                  </div>
                  <!-------------title-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your title:"
                      label-for="formrow-title-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-title-input"
                        type="text"
                        placeholder="Title"
                        v-model="form.title"
                        name="widgettitle"
                      ></b-form-input>
                    </b-form-group>
                  </div>

                  <!-------------Languages-------------------->
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Select your Langauges:"
                      label-for="formrow-langauge-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-select
                        class="form-select form-select-sm"
                        v-model="form.language"
                        size="sm"
                        placeholder="Languages"
                        :options="languageOptions"
                        style="height: 36px"
                        value-field="value"
                        text-field="label"
                      ></b-form-select>
                    </b-form-group>
                  </div>
                </div>

                <div class="row mb-4 mt-4">
                  <div class="col-md-12">
                    <h5 class="card-title mb-3">Two Factor Authentication Settings</h5>
                    <h6 class="card-subtitle mb-4 card-title-desc">
                      {{ AddUser ? "Add" : "Update" }} user's two factor authentication settings
                    </h6>

                    <div class="form-check form-switch mb-3 form-switch-lg">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="2fa-toggle"
                        v-model="twofact"
                      />
                      <label class="form-check-label" for="2fa-toggle">
                        Enable SMS Two Factor Authentication
                      </label>
                    </div>
                  </div>
                </div>

                <!-------------Reports-------------------->
                <div class="row mb-4" v-if="reportOptions && reportOptions.length > 0">
                  <div class="col-md-4">
                    <h5 class="card-title mb-3">User's Report Access</h5>
                    <h6 class="card-subtitle mb-4 card-title-desc">
                      {{ AddUser ? "Add" : "Update" }} user's report access
                    </h6>
                    <b-form-group
                      class="mb-3"
                      label="Reports: Select one or multiple reports:"
                      label-for="formrow-report-input"
                      label-class="font-weight-normal"
                    >
                      <VueMultiselect
                        v-model="form.report"
                        :options="reportOptions"
                        :multiple="true"
                        :close-on-select="true"
                        label="name"
                        track-by="id"
                      />
                    </b-form-group>
                  </div>
                </div>


             <div class="row"  v-if="shouldShowIntegrationAccess">
              <div>
                <h5 class="card-title mb-3">User's Integration Access</h5>
                <h6 class="card-subtitle mb-4 card-title-desc">
                  {{ AddUser ? "Add" : "Update" }} user's integration access
                </h6>
              </div>    
              </div>
                <div class="row" v-if="agentObj.ams_2000">                           
                  <div class="col-md-12">
                    <div class="form-check form-switch mb-3 form-switch-lg">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="checkbox-1"
                        v-model="checked_ams_2000"
                      />
                      <label class="form-check-label" for="checkbox-1">
                        Allow user AMS 2000 API Access
                      </label>
                    </div>
                  </div>
                </div>
                <div class="row"  v-if="agentObj.ams_evo">
                  <div class="col-md-12">
                    <div class="form-check form-switch mb-3 form-switch-lg">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="checkbox-2"
                        v-model="checked_ams_evolution"
                      />
                      <label class="form-check-label" for="checkbox-2">
                        Allow user AMS Evoluation API Access
                      </label>
                    </div>
                  </div>
                </div>
                <div class="row" v-if="agentObj.neo_verify">
                  <div class="col-md-12" >
                    <div class="form-check form-switch mb-3 form-switch-lg">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="checkbox-3"
                        v-model="checked_neo_verify"
                      />
                      <label class="form-check-label" for="checkbox-3">
                        Allow user NEO verify API Access
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card">
                <div class="card-body">
                  <div class="mb-3">
                    <b-button variant="primary" type="submit" v-if="AddUser">
                      <i
                        v-if="addEditWorkflowLoading"
                        class="font-size-16 align-middle me-2"
                      > <Icon icon="bx:loader-alt" /></i>
                      Save!
                    </b-button>

                    <b-button variant="primary" type="submit" v-if="!AddUser">
                      <i
                        v-if="addEditWorkflowLoading"
                        class="font-size-16 align-middle me-2"
                      > <Icon icon="bx:loader-alt" /></i>
                      Update!
                    </b-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Add workflow condition and action cards here -->
      </b-form>
    </div>
  </div>
</template>
<script>
import VueMultiselect from "vue-multiselect";
import Loader from "../../../components/Loader/loader.vue";
import {
  required,
  email,
  minLength,
  maxLength,
  sameAs,
  helpers,
} from "@vuelidate/validators";
import {
  BForm,
  BFormGroup,
  BFormInput,
  BButton,
  BFormSelect,
  BFormSelectOption,
  BFormCheckbox,
} from "bootstrap-vue-next";
import { useVuelidate } from "@vuelidate/core";
import UserMangetService from "../../../service/userManagementSerice";
import { Icon } from '@iconify/vue';

import * as _ from "lodash";
export default {
  setup() {
    const v$ = useVuelidate({
      form: {
        email: { required },
        firstname: { required },
        lastname: { required },
        phone: { required },
        role: { required },
        // password: { required },
      },
    });

    return { v$ }; // Ensure to return an object with the 'v$' property
  },
  props: {
    selectedId: {
      type: [Number, null],
      required: true,
    },
    AddUser: {
      type: Boolean,
      required: true,
    },

    addEditWorkflowLoading: {
      required: true,
    },
    workflowTypes: {
      type: Array,
      required: true,
    },
    setErrorMessage: {
      type: Function,
      required: true,
    },
    setSuccessMessage: {
      type: Function,
      required: true,
    },
    userData: {
      type: Object,
      required: true,
    },
    success: {
      type: Boolean,
      required: true,
    },
    closemodal:{
      type: Boolean,
      required: true,
    },
    agentObj:{
      type: Object,
      required: true,
    }
  },
  validations: {
    form: {
      email: { email, required },
      firstname: { required },
      lastname: { required },
      phone: {
        required,
        minLength: minLength(10), // Minimum length of 8 characters
        maxLength: maxLength(15), // Maximum length of 32 characters
      },
      role: { required },

    },
  },
  mounted() {},
  data() {
    return {
      submitted: false,
      errorMessage: '',

      form: {
        email: "",
        title: "",
        lastname: "",
        firstname: "",
        phone: "",
        department: "",
        // password: '',
        extension: "",
        role: "",
        language: "",
        report: "",
      },
      roleOptions: ["sysadmin", "admin", "guest", "member", "agent", "partner"],
      languageOptions: [],
      reportOptions: [],
      checked_ams_2000: false,
      checked_ams_evolution: false,
      checked_neo_verify: false,
      reportSamplearray: [],
      widgetLoading: false,
      twofact: false,
      created_on: "",
      updated_on: "",
      sid: "",
    };
  },
  computed: {
    shouldShowIntegrationAccess() {
    return this.agentObj.ams_2000 || this.agentObj.ams_evo || this.agentObj.neo_verify;
  }
  },

  methods: {
    formSubmit() {
      this.submitted = true;
      this.v$?.form.$touch();

      if (this.v$.$invalid) {
        // Use optional chaining to avoid errors if v$ is undefined
        return;
      }
      if(!this.errorMessage)
      {
        this.submitData(this.form);

      }
      // this.widgetLoading = true;
    },
    validateExtension() {
      // Check if the entered value is negative, and reset to a default value if needed
      if (this.form.extension < 0 || this.form.extension.length < 3) {
        // You can choose to handle this validation failure in a way that fits your application
        // For example, displaying an error message or resetting to a default value
        this.form.extension = null; // or this.form.extension = "";
      }
    },

    validateInput() {
      // Use a regular expression to check if the input contains exactly 3 numbers
      const numberRegex = /\d{3}/;

      if (this.form.extension.length === 3) {
        this.errorMessage = ""
      } else {
        this.errorMessage = "Extension must be at least 3 digits long";

      }
    },

    submitData(form) {
      if (this.AddUser) {
        let data = {
          role: form.role,
          title: form.title,
          firstname: form.firstname,
          lastname: form.lastname,
          extension: form.extension ? form.extension : 0,
          phonenumber: form.phone,
          // password:"User@123!",
          email: form.email,
          two_factor_auth: this.twofact,
          department: form.department,
          reports: form.report ? form.report.map((item) => item.id) : "",
          languages: form.language,
          ams_2000: this.checked_ams_2000 ? "y" : "n",
          ams_evolution: this.checked_ams_evolution ? "y" : "n",
          neo_verify: this.checked_neo_verify ? "y" : "n",
        };

        this.$emit("formSubmit", {
          ...data,
        });
      } else {
        let data = {
          role: form.role,
          title: form.title,
          firstname: form.firstname,
          lastname: form.lastname,
          extension: form.extension ? form.extension : 0,
          phonenumber: form.phone,
          email: form.email,
          two_factor_auth: this.twofact,
          department: form.department,
          reports: form.report ? form.report.map((item) => item.id) : "",
          languages: form.language,
          ams_2000: this.checked_ams_2000 ? "y" : "n",
          ams_evolution: this.checked_ams_evolution ? "y" : "n",
          neo_verify: this.checked_neo_verify ? "y" : "n",
        };

        this.$emit("formSubmit", {
          ...data,
        });
      }
    },
    clearFields() {
      this.form = {
        email: "",
        title: "",
        lastname: "",
        firstname: "",
        phone: "",
        department: "",
        extension: "",
        role: "",
        language: "",
        report: "",
      };
      this.checked_ams_2000 = false;
      this.checked_ams_evolution = false;
      this.checked_neo_verify = false;
      this.submitted = false;
    },

    async getUserById(id) {
      this.widgetLoading = true;
      const {
        data: { data, message, success },
      } = await UserMangetService.getUserManagementDataByid(id);
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.setEditableData(data);
      }

      this.widgetLoading = false;
    },

    formatDate(dateString) {
      const options = {
        weekday: "short",
        year: "numeric",
        month: "short",
        day: "2-digit",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
      };

      const formattedDate = new Date(dateString).toLocaleString("en-US", options);
      return formattedDate;
    },

    setEditableData(data) {
      this.form.title = data.title;
      this.form.firstname = data.firstname;
      this.form.lastname = data.lastname;
      this.form.email = data.email;
      this.form.phone = data.phonenumber;
      // this.form.password = 'User@123';
      this.form.department = data.department;
      this.form.extension = data.extension;
      (this.created_on = this.formatDate(data.created_on)),
        (this.updated_on = this.formatDate(data.updated_on)),
        (this.sid = data.sid),
        (this.form.role = data.role),
        (this.form.language = data.locale);
      (this.checked_ams_2000 = data.ams_2000),
        (this.twofact = data.two_factor_auth),
        (this.checked_ams_evolution = data.ams_evolution),
        (this.checked_neo_verify = data.neo_verify),
        (this.form.report = this.convertArray(data.reports));
    },

    convertArray(reports) {
      const actualarrayLookup = {};
      this.reportSamplearray.forEach((item) => {
        actualarrayLookup[item.id] = item;
      });
      const output = reports.map((report) => actualarrayLookup[report.report_id]);
      return output;
    },
    setDropdownValues(value) {
      this.languageOptions = value.preferred_languages;
      this.reportOptions = value.reports;
      this.reportSamplearray = value.reports;
    },
  },

  components: {
    Loader,
    VueMultiselect,
    BForm,
    BFormGroup,
    BFormInput,
    BButton,
    BFormSelect,
    BFormSelectOption,
    BFormCheckbox,
    Icon
  },
  watch: {
    selectedId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getUserById(newVal);
        }
      },
    },

    AddUser: {
      immediate: true,
      handler(newVal) {

        if (newVal) {
          this.clearFields();
        }
      },
    },

    userData: {
      immediate: true,
      handler(newVal) {
        this.setDropdownValues(newVal);
      },
    },

    success: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.clearFields();
        }
      },
    },
    closemodal:{
      immediate: true, 
      handler(newVal) {
      
        this.clearFields();
          this.submitted = false;
      },
     
    },
    agentObj:{
      immediate: true, 
      handler(newVal) {
      
      }, 
      }
  },
};
</script>