<template>
  <div class="bg-secondary d-none d-xl-flex flex-row-reverse">
    <b-dropdown
      v-if="enable"
      lazy
      right
      size="sm"
      toggle-class="rounded-0"
      @show="getAvailableSettings"
      class="developer-mode-dropdown"
      :text="$t('Common.DeveloperMode')"
      menu-class="developer-mode-dropdown-dropdown-list"
      ref="developerModeDropdown"
    >
      <b-dropdown-text>
        <h6 class="text-black">{{ $t('Common.DeveloperMode') }}</h6>
        <span class="text-danger font-weight-bold text-uppercase pr-2">{{ $t('Common.Warning') }}:</span>
        <small>{{ $t('Common.DeveloperMode.WarningText') }}</small>
      </b-dropdown-text>
      <b-dropdown-form class="mt-3">
        <div v-for="(value, keyName) in settingsOptionsModel" :key="keyName">
          <b-form-checkbox
            v-if="typeof value === 'boolean'"
            v-model="settingsOptionsModel[keyName]"
            switch
            class="mb-2"
          >
            {{ keyNameConverter(keyName) }}
          </b-form-checkbox>
        </div>
        <hr class="mb-2" />
        <b-button size="sm" variant="light" class="float-right" @click="saveChanges">{{ $t('Common.Apply') }}</b-button>
      </b-dropdown-form>
    </b-dropdown>
  </div>
</template>

<script>
import _ from 'lodash'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'DeveloperModePanel',
  data() {
    return {
      enable: this.$appSettings.config.developerMode,
      settingsOptionsModel: {},
    }
  },
  computed: {
    ...mapGetters(['getExperimentalFeatureSettings']),
  },
  methods: {
    ...mapActions(['setExperimentalFeature']),
    getAvailableSettings() {
      this.settingsOptionsModel = { ...this.getExperimentalFeatureSettings }
    },
    keyNameConverter(key) {
      return _.startCase(key)
    },
    saveChanges() {
      if (JSON.stringify(this.settingsOptionsModel) !== JSON.stringify(this.getExperimentalFeatureSettings)) {
        this.$swal({
          title: this.$t('Common.DeveloperMode.ConfirmationText'),
          text: this.$t('Common.DeveloperMode.WarningText'),
          confirmButtonText: this.$t('Common.Confirm'),
          showCancelButton: true,
          type: 'warning',
        }).then(result => {
          if (result) {
            this.setExperimentalFeature(this.settingsOptionsModel)
          } else {
            this.settingsOptionsModel = { ...this.getExperimentalFeatureSettings }
          }
        })
      } else {
        this.$refs['developerModeDropdown'].hide()
      }
    },
  },
}
</script>
