<template>
  <div id="profile-settings">
    <div class="spinner-main">
      <Loader :loading="widgetLoading"> </Loader>
    </div>
   
    <template v-if="profileData && !widgetLoading">
      <button
        v-show="isMobileView"
        type="button"
        class="btn btn-sm px-3 font-size-16 hamburg-profile-mobile-btn"
        @click="mobileTabModalShow = true"
      >
        <i class="fa fa-fw fa-bars"></i>
      </button>
      <div class="row d-flex justify-content-between">
        <div class="col-md-3" v-show="!isMobileView">
          <div class="row justify-content-center">
            <div class="col-xl-12">
              <div class="card">
                <div class="card-body">
                  <profile-tab
                    v-for="(tabSection, index) in computedTabSections"
                    :key="index"
                    :index="index"
                    :detail="tabSection"
                    @selectTabIndex="setSelectedTabIndex"
                    :selectedTabIndex="selectedTabIndex"
                  ></profile-tab>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :class="rightSectionClassName">
          <personalnfo
            v-if="showSection('PERSONAL_INFO')"
            :testImages="testImages"
            :updateProfileInfoLoading="updateProfileInfoLoading"
            @formSubmit="updateProfileInfo"
            :timeZones="timeZones"
            :languages="languages"
            :profileData="profileData"
            @toast="$toast.open($event)"
          ></personalnfo>
          <security-info
            v-if="showSection('SECURITY_INFO')"
            :profileData="profileData"
            @formSubmit="updateProfileSecurityInfo"
            :updateProfileSecurityInfoLoading="updateProfileSecurityInfoLoading"
            :securityInfoModalClose="securityInfoModalClose"
            @resetSecurityInfoModalClose="securityInfoModalClose = false"
          ></security-info>
          <schedule-avail-info
            :timeZones="timeZones"
            v-if="showSection('SCHEDULE_SETTINGS')"
            :profileData="profileData"
            :scheduleData="scheduleData"
            @form-submit="onScheduleSubmit"
            :scheduleSubmitloading="scheduleSubmitloading"
            @selectTabIndex="setSelectedTabIndex"
          ></schedule-avail-info>
          <two-factor-authentication
            v-if="showSection('TWO_FA')"
            :profileData="profileData"
            :twoFactor="profileData['twoFactor']"
            @formSubmit="updateProfile2FA"
            :updateProfile2FALoading="updateProfile2FALoading"
          ></two-factor-authentication>
          <login-info
            :info="profileData.loginInfo"
            v-if="showSection('LOGIN_SECTION')"
          ></login-info>
          <theme-settings
            v-if="showSection('THEME_SETTINGS')"
            :darkMode="profileData.darkMode"
            @formSubmit="updateProfileThemeSettings"
            :updateProfileThemeSettingsLoading="
              updateProfileThemeSettingsLoading
            "
          ></theme-settings>
          <notification-settings
            v-if="showSection('NOTIFICATION_SETTINGS')"
            @updateInAppNotificationSettings="updateInAppNotificationSettings"
            :updateInAppNotificationsLoading="updateInAppNotificationsLoading"
            :inAppNotficationSettings="inAppNotficationSettings"
            :updateEmailNotificationSettingsLoading="
              updateEmailNotificationSettingsLoading
            "
            :emailNotficationSettings="emailNotficationSettings"
            @updateEmailNotificationSettings="updateEmailNotificationSettings"
          ></notification-settings>
        </div>
      </div>
      <b-modal
       
        v-model="mobileTabModalShow"
        dialog-class="modal-dialog-slideout"
        :hide-footer="true"
        content-class="rounded-0"
      >
        <template #modal-header>
          <button
            type="button"
            class="btn btn-primary"
            @click="mobileTabModalShow = false"
          >
            <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
            Close
          </button>
        </template>
        <div class="row justify-content-center">
          <div class="col-xl-12">
            <div class="card">
              <div class="card-body">
                <profile-tab
                  v-for="(tabSection, index) in computedTabSections"
                  :key="index"
                  :index="index"
                  :detail="tabSection"
                  @selectTabIndex="setSelectedTabIndex"
                  :selectedTabIndex="selectedTabIndex"
                ></profile-tab>
              </div>
            </div>
          </div>
        </div>
      </b-modal>
    </template>
  </div>
</template>
<script>
import Loader from '../../components/Loader/loader.vue';
import MainService from '../../service/mainService';
import ProfileService from '../../service/profileService';
import { toastConfig } from '../../utils/util';
import LoginInfo from './LoginInfo.vue';
import ThemeSettings from './ThemeSettings.vue';
import TwoFactorAuthentication from './2FA.vue';
import Personalnfo from './Personalnfo.vue';
import SecurityInfo from './SecurityInfo.vue';
import ScheduleAvailInfo from './ScheduleAvailInfo.vue';
import ProfileTab from './ProfileTab.vue';
import * as _ from 'lodash';
import NotificationSettings from './NotificationSettings.vue';
import { BModal } from 'bootstrap-vue-next'

export default {
  components: {
    Loader,
    LoginInfo,
    ThemeSettings,
    TwoFactorAuthentication,
    Personalnfo,
    SecurityInfo,
    ScheduleAvailInfo,
    ProfileTab,
    NotificationSettings,
    BModal
  },
  data() {
    return {
      profileLoading: false,
      timeZonesLoading: false,
      languagesLoading: false,
      scheduleSubmitloading: false,
      updateProfileInfoLoading: false,
      updateProfileSecurityInfoLoading: false,
      updateProfile2FALoading: false,
      updateProfileThemeSettingsLoading: false,
      getInAppNotificationsLoading: false,
      updateInAppNotificationsLoading: false,
      getEmailNotificationSettingsLoading: false,
      updateEmailNotificationSettingsLoading: false,
      timeZones: [],
      languages: [],
      testImages: _vue_images_config,
      profileData: null,
      securityInfoModalClose: false,
      tabSections: [
        {
          label: 'Personal Settings',
          description: 'Manage your personal profile and security information',
          icon: 'bxs-user-circle',
          tabsToShow: [
            'PERSONAL_INFO',
            'SECURITY_INFO',
            'TWO_FA',
            'LOGIN_SECTION',
          ],
        },
        {
          label: 'Schedule Settings',
          description: 'Manage your schedule and availability',
          icon: 'bx-calendar',
          tabsToShow: ['SCHEDULE_SETTINGS'],
        },
        {
          label: 'Notification Settings',
          description: 'Manage your email and application notifications',
          icon: 'bx-bell',
          tabsToShow: ['NOTIFICATION_SETTINGS'],
        },
        {
          label: 'Theme Settings',
          description: 'Manage your theme settings',
          icon: 'bxs-color-fill',
          tabsToShow: ['THEME_SETTINGS'],
        },
      ],
      selectedTabIndex: 0,
      windowWidth: window.innerWidth,
      mobileTabModalShow: false,
      scheduleData: {},
      inAppNotficationSettings: {},
      emailNotficationSettings: {},
    };
  },
  mounted() {
    console.log("profile settingss")
    this.getProfileInfo();
    this.getTimeZones();
    this.getLanguages();
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
    this.getInAppNotificationSettings();
    this.getEmailNotificationSettings();
  },
  computed: {
    rightSectionClassName() {
      if (this.isMobileView) {
        return 'col-md-12';
      }
      return 'col-md-9';
    },
    computedTabSections() {
      let tabSections = [...this.tabSections];
      if (!_.isNull(this.profileData)) {
        if (_.includes(['admin', 'agent'], this.profileData.role)) {
          return tabSections;
        }
      }
      return _.filter(
        tabSections,
        ({ label }) => label !== 'Schedule Settings',
      );
    },
    widgetLoading() {
      return (
        this.profileLoading ||
        this.timeZonesLoading ||
        this.languagesLoading ||
        this.getInAppNotificationsLoading ||
        this.getEmailNotificationSettingsLoading
      );
    },
    isMobileView() {
      if (this.windowWidth < 991) {
        return true;
      }
      return false;
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    updateEmailNotificationSettings(postData) {
      this.updateEmailNotificationSettingsLoading = true;
      ProfileService.updateEmailNotificationSettings(postData)
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.updateEmailNotificationSettingsLoading = false;
            this.$toast.open(toastConfig.toastSuccess(message));
            this.getEmailNotificationSettings();
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateEmailNotificationSettingsLoading = false;
          }
        })
        .catch((e) => {
          this.updateEmailNotificationSettingsLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while updating in app notfication settings!',
            ),
          );
        });
    },
    getEmailNotificationSettings() {
      this.getEmailNotificationSettingsLoading = true;
      ProfileService.getEmailNotificationSettings()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.getEmailNotificationSettingsLoading = false;
            this.emailNotficationSettings = data;
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.getEmailNotificationSettingsLoading = false;
          }
        })
        .catch((e) => {
          this.getEmailNotificationSettingsLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching in app notfication settings!',
            ),
          );
        });
    },
    updateInAppNotificationSettings(postData) {
      this.updateInAppNotificationsLoading = true;
      ProfileService.updateInAppNotificationSettings(postData)
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.updateInAppNotificationsLoading = false;
            this.$toast.open(toastConfig.toastSuccess(message));
            this.getInAppNotificationSettings();
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateInAppNotificationsLoading = false;
          }
        })
        .catch((e) => {
          this.updateInAppNotificationsLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while updating in app notfication settings!',
            ),
          );
        });
    },
    getInAppNotificationSettings() {
      this.getInAppNotificationsLoading = true;
      ProfileService.getInAppNotificationSettings()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.getInAppNotificationsLoading = false;
            this.inAppNotficationSettings = data;
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.getInAppNotificationsLoading = false;
          }
        })
        .catch((e) => {
          this.getInAppNotificationsLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching in app notfication settings!',
            ),
          );
        });
    },
    updateUserScheduleInfo(postData) {
      this.scheduleSubmitloading = true;
      ProfileService.updateUserScheduleInfo(
        CURRENT_USER_DETAILS.userID,
        postData,
      )
        .then(({ data: { success, message } }) => {
          if (success) {
            this.$toast.open(toastConfig.toastSuccess(message));
            this.scheduleSubmitloading = false;
            this.getUserScheduleInfo();
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.scheduleSubmitloading = false;
          }
        })
        .catch((e) => {
          this.scheduleSubmitloading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while trying to update schedule information!',
            ),
          );
        });
    },
    onScheduleSubmit(data) {
      this.updateUserScheduleInfo(data);
    },
    onResize() {
      this.windowWidth = window.innerWidth;
    },

    setSelectedTabIndex(index) {
      this.selectedTabIndex = index;
      if (this.isMobileView) {
        this.mobileTabModalShow = false;
      }
    },
    showSection(label) {
      const tabsToShow =
        this.computedTabSections[this.selectedTabIndex].tabsToShow;
      if (_.includes(tabsToShow, label)) {
        return true;
      }
      return false;
    },
    getProfileInfo() {
      this.profileLoading = true;
      ProfileService.getProfileInfo()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            // this.$toast.open(toastConfig.toastSuccess(message));
            this.profileLoading = false;
            this.profileData = data;
            if (_.includes(['admin', 'agent'], this.profileData.role)) {
              this.getUserScheduleInfo();
            }
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.profileLoading = false;
            this.profileData = null;
          }
        })
        .catch((e) => {
          this.profileLoading = false;
          this.profileData = null;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching partnership details!',
            ),
          );
        });
    },
    getUserScheduleInfo() {
      ProfileService.getUserScheduleInfo()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.scheduleData = data;
          } else {
            this.$toast.open(toastConfig.toastError(message));
          }
        })
        .catch((e) => {
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching schedule info!',
            ),
          );
        });
    },
    getTimeZones() {
      this.timeZonesLoading = true;
      MainService.getTimeZones()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.timeZonesLoading = false;
            this.timeZones = data;
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.timeZonesLoading = false;
          }
        })
        .catch((e) => {
          this.timeZonesLoading = false;
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching time zones!',
            ),
          );
          console.log('error', e);
        });
    },
    getLanguages() {
      this.languagesLoading = true;
      MainService.getLanguages()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.languagesLoading = false;
            this.languages = data;
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.languagesLoading = false;
          }
        })
        .catch((e) => {
          this.languagesLoading = false;
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching languages!',
            ),
          );
          console.log('error', e);
        });
    },
    updateProfileInfo(postData) {
      this.updateProfileInfoLoading = true;
      ProfileService.updateProfileInfo(postData)
        .then(({ data: { success, message } }) => {
          if (success) {
            this.$toast.open(toastConfig.toastSuccess(message));
            this.updateProfileInfoLoading = false;
            this.getProfileInfo();
            location.reload(true);
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateProfileInfoLoading = false;
          }
        })
        .catch((e) => {
          this.updateProfileInfoLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while trying to update profile information!',
            ),
          );
        });
    },
    updateProfileSecurityInfo(postData) {
      this.updateProfileSecurityInfoLoading = true;
      ProfileService.updateProfileSecurityInfo(postData)
        .then(({ data: { success, message } }) => {
          if (success) {
            this.$toast.open(toastConfig.toastSuccess(message));
            this.updateProfileSecurityInfoLoading = false;
            this.getProfileInfo();
            this.triggerSecurityInfoModalClose();
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateProfileSecurityInfoLoading = false;
          }
        })
        .catch((e) => {
          this.updateProfileSecurityInfoLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while trying to update profile security info!',
            ),
          );
        });
    },
    updateProfile2FA(postData) {
      this.updateProfile2FALoading = true;
      ProfileService.updateProfile2FA(postData)
        .then(({ data: { success, message } }) => {
          if (success) {
            this.$toast.open(toastConfig.toastSuccess(message));
            this.updateProfile2FALoading = false;
            this.getProfileInfo();
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateProfile2FALoading = false;
          }
        })
        .catch((e) => {
          this.updateProfile2FALoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while trying to update profile 2FA!',
            ),
          );
        });
    },
    updateProfileThemeSettings(postData) {
      this.updateProfileThemeSettingsLoading = true;
      ProfileService.updateProfileThemeSettings(postData)
        .then(({ data: { success, message } }) => {
          if (success) {
            this.$toast.open(toastConfig.toastSuccess(message));
            this.updateProfileThemeSettingsLoading = false;
            location.reload(true);
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.updateProfileThemeSettingsLoading = false;
          }
        })
        .catch((e) => {
          this.updateProfileThemeSettingsLoading = false;
          console.log('error', e);
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while trying to update profile theme settings!',
            ),
          );
        });
    },
    triggerSecurityInfoModalClose() {
      this.securityInfoModalClose = true;
    },
  },
};
</script>