<template>
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">{{ $t('sdl.main.message.timeZone') }}</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="$emit('close');"></button>
    </div>
    <div class="modal-body ui--timezone">
      <h5 class="mb-4">{{ userTimezoneLabel }}</h5>
      <div class="row mb-3">
        <div class="col-12">
          <label for="">{{ $t('sdl.common.timezone.setting') }}</label>
          <div class="input-group">
            <select class="form-select" required="" style="flex-basis: 110px" v-model="timeZoneArea" @change="timeZoneId = ''">
              <option value="Africa">{{ $t('sdl.common.timezone.Africa') }}</option>
              <option value="America">{{ $t('sdl.common.timezone.America') }}</option>
              <option value="Asia">{{ $t('sdl.common.timezone.Asia') }}</option>
              <option value="Atlantic">{{ $t('sdl.common.timezone.Atlantic') }}</option>
              <option value="Australia">{{ $t('sdl.common.timezone.Australia') }}</option>
              <option value="Europe">{{ $t('sdl.common.timezone.Europe') }}</option>
              <option value="Indian">{{ $t('sdl.common.timezone.Indian') }}</option>
              <option value="Pacific">{{ $t('sdl.common.timezone.Pacific') }}</option>
              <option value="Etc">{{ $t('sdl.common.timezone.Etc') }}</option>
            </select>
            <select class="form-select" required="" style="flex-basis: 250px" v-model="timeZoneId">
              <option value="" disabled>{{ $t('sdl.offsider.label.select') }}</option>
              <option :value="time.timeZoneId" v-for="time in filteredTimeZoneList" :key="time.timeZoneId">
                {{ time.displayTimeZone }}
              </option>
            </select>
            <button class="btn btn-secondary" @click="saveTimezone()" :disabled="timeZoneId === ''">
              {{ $t('sdl.common.label.save') }}
            </button>
          </div>
        </div>
      </div>
      <ul>
        <li>{{ $t('sdl.common.timezone.settingDesc1') }}</li>
        <li>{{ $t('sdl.common.timezone.settingDesc2') }}</li>
        <li v-if="false">{{ $t('sdl.common.timezone.settingDesc3') }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { SDLUtil, StringUtil } from '@/utils';
import loginService from '@/service/loginService';

export default {
  name: 'sdlSearchPopup',
  computed: {
    userTimezoneLabel() {
      return `${this.userInfo.timeZoneId} (${this.userInfo.timeZoneCode})`;
    },
    filteredTimeZoneList() {
      if (this.timeZoneArea === 'Etc') {
        // return _.sortBy(this.timeZoneList.filter(zone => !this.timeZoneAreaList.includes(zone.timeZoneArea)), [
        //   'displayTimeZone',
        // ]);
        return this.timeZoneList.filter(zone => !this.timeZoneAreaList.includes(zone.timeZoneArea));
      }
      // return _.sortBy(this.timeZoneList.filter(zone => zone.timeZoneArea === this.timeZoneArea), 'displayTimeZone');
      return this.timeZoneList.filter(zone => zone.timeZoneArea === this.timeZoneArea);
    },
  },
  created() {
    this.userInfo = SDLUtil.getLoginedUserInfo();
    axios.get(`${SDLUtil.API_URL}/auth/users/timezone`).then(({ data }) => {
      this.timeZoneList = data.timeZoneList.map(zone => ({
        ...zone,
        // isEtc,
        timeZoneArea: zone.timeZoneId.split('/')[0],
      }));
      this.timeZoneArea = data.timeZoneArea;
      this.timeZoneId = data.timeZoneId;
    });
  },
  data() {
    return {
      userInfo: {},
      timeZoneList: [],
      timeZoneArea: '',
      timeZoneId: '',
      timeZoneAreaList: ['Africa', 'America', 'Asia', 'Atlantic', 'Australia', 'Europe', 'Indian', 'Pacific'], // etc 제외
    };
  },
  methods: {
    saveTimezone() {
      SDLUtil.showLoadingBar(true);
      axios
        .put(`${SDLUtil.API_URL}/auth/users/timezone?${StringUtil.queryStringfy({ timeZoneId: this.timeZoneId })}`)
        .then(({ data }) => {
          // 성공
          SDLUtil.showLoadingBar(false);
          // loginService.setToken(data.jwtToken);
          this.updateUserToken({ timeZoneId: this.timeZoneId, timeZoneCode: data });
        })
        .catch(err => {
          SDLUtil.errorAlert(err);
          SDLUtil.showLoadingBar(false);
        });
    },
    updateUserToken(param) {
      const params = {
        language: this.userInfo.language,
        timeZoneId: this.userInfo.timeZoneId,
        timeZoneCode: this.userInfo.timeZoneCode,
        ...param,
      };

      axios.put(`${SDLUtil.API_URL}/auth/users/user-token`, params).then(({ data }) => {
        loginService.setToken(data.jwtToken);
        this.userInfo = SDLUtil.getLoginedUserInfo();
      });
    },
  },
};
</script>