<template>
  <div>
    <div class="container-fluid p-0">
      <div class="settings d-flex flex-nowrap">
        <div class="settings__sidebar col-lg-3 col-md-4 px-0" style="background-color: #f4f5f7">
          <div class="d-flex flex-column align-items-sm-start pt-2 text-white min-vh-100 h-100">
            <nuxt-link :to="localePath('/')" class="d-flex align-items-center pb-5 text-white text-decoration-none">
              <div class="d-none d-md-inline px-sm-2 px-md-3 px-lg-3 pt-3 main-logo">
                <img src="/logo-gray.svg" height="35" class="img " alt="Mindboost Logo">
              </div>
              <div class="d-md-none px-2 px-md-3 px-lg-3 pt-3 main-logo-mobile">
                <img src="/mindboost-logo-small.svg" width="45" class="img " alt="Mindboost Logo">
              </div>
            </nuxt-link>
            <div class="sidebar sidebar--settings">
              <ul class="sidebar__main-menu">
                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/account')" class="sidebar__link list-active">
                    <i class="fa-solid d-md-none d-block fa-user" /><span class="d-none d-md-inline">{{ t('Account') }}</span>
                  </nuxt-link>
                </li>
                <li v-if="dataStore.user.team_subscription_plan == '0' && dataStore.user.enterprise_subscription_plan == '0' && (dataStore.user.basic_subscription_plan == '1')" class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/subscription')" class="sidebar__link list-active">
                    <i class="fa-solid d-md-none d-block fa-credit-card" /><span class="d-none d-md-inline">{{ t('Subscription') }}</span>
                  </nuxt-link>
                </li>
                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/soundscape')" class="sidebar__link list-active">
                    <i class="fa-solid d-md-none d-block fa-volume-high" /><span class="d-none d-md-inline">{{ t('Settings') }}</span>
                  </nuxt-link>
                </li>
                <!-- <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/timersettings')" class="sidebar__link list-active">
                    <i class="fa-solid fa-volume-high sidebar__icon" /><span class="sidebar__text">{{ t('Timer') }}</span>
                  </nuxt-link>
                </li> -->
                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/about')" class="sidebar__link list-active">
                    <i class="fa-solid fa-circle-info d-block d-md-none" /><span class="d-none d-md-inline"> {{ t('About Mindboost') }}</span>
                  </nuxt-link>
                </li>
                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/faq')" class="sidebar__link list-active">
                    <i class="fa-solid d-block d-md-none fa-circle-question" /><span class="d-none d-md-inline">{{ t('FAQ') }} </span>
                  </nuxt-link>
                </li>
              </ul>
              <ul class="sidebar__secondary-menu">
                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/imprint')" class="sidebar__link sidebar__link--secondary">
                    <i class="fa-solid fa-stamp d-md-none d-block" /><span class="d-none d-md-inline">{{ t('Imprint') }} </span>
                  </nuxt-link>
                </li>

                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/dataprotection')" class="sidebar__link sidebar__link--secondary">
                    <i class="fa-solid fa-shield d-block d-md-none" /><span class="d-none d-md-inline">{{ t('Data Protection') }}</span>
                  </nuxt-link>
                </li>

                <li class="sidebar__item">
                  <nuxt-link :to="localePath('/settings/termsandcondition')" class="sidebar__link sidebar__link--secondary">
                    <i class="fa-solid fa-scale-balanced d-block d-md-none" /><span class="d-none d-md-inline">{{ t('Terms & Conditions') }}</span>
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="settings__content col-md-8 col-lg-9 justify-content-end px-3">
          <div class="d-flex justify-content-end pb-sm-5 pt-3">
            <router-link :to="localePath('/')" style="cursor: pointer">
              <svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 20.1-7.35 7.35c-.275.275-.625.413-1.05.413-.425 0-.775-.138-1.05-.413-.275-.275-.412-.625-.412-1.05 0-.425.137-.775.412-1.05L15.9 18l-7.35-7.35c-.275-.275-.412-.625-.412-1.05 0-.425.137-.775.412-1.05.275-.275.625-.413 1.05-.413.425 0 .775.138 1.05.413L18 15.9l7.35-7.35c.275-.275.625-.413 1.05-.413.425 0 .775.138 1.05.413.275.275.413.625.413 1.05 0 .425-.138.775-.413 1.05L20.1 18l7.35 7.35c.275.275.413.625.413 1.05 0 .425-.138.775-.413 1.05-.275.275-.625.413-1.05.413-.425 0-.775-.138-1.05-.413L18 20.1Z" fill="#585C5E" /></svg>
            </router-link>
          </div>
          <nuxt-page key="child" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'pinia'
import { ANC } from '@/stores/interfaces/ANC'
import { HeadsetType } from '@/stores/interfaces/HeadsetType'
import { useUserStore } from '~/stores/user'
export default {
  setup () {
    definePageMeta({
      middleware: 'auth'
    })
    // Use useUserStore to get the user store
    const dataStore = useUserStore()
    const { t } = useI18n()
    const localePath = useLocalePath()
    // useNuxtApp().$logger.log('dataStore.user.email', dataStore.user.basic_subscription_plan)
    return { t, localePath, dataStore }
  },
  data () {
    return {
      adaptiveSounscape: false,
      form: {
        soundscape: '',
        headphone_type: '',
        anc_type: '',
        adaptive_sound_scape: '',
        dataStore: useUserStore()
      }

    }
  },
  mounted () {
    this.fetchSettings()
  },
  methods: {
    ...mapActions(useUserStore, ['updateHeadsetType', 'updateANC']),
    fetchSettings () {
      this.$axios.post('/api/fetch-settings').then(({ data }) => {
        if (data.success) {
          this.form = data.setting
          if (data.setting.adaptive_sound_scape === 'yes' || data.setting.adaptive_sound_scape === 'Yes') {
            this.adaptiveSounscape = true
          } else {
            this.adaptiveSounscape = false
          }
        }
      }).catch(() => {
        this.$toast.error('something went wrong while saving...')
      })
    },
    saveSetting (value, type) {
      if (type === 'soundscape') {
        this.form.soundscape = value
      }
      if (type === 'headphone') {
        this.form.headphone_type = value
        if (value === 'In-ear') { this.updateHeadsetType(HeadsetType.InEar) } else { this.updateHeadsetType(HeadsetType.OverEar) }
      }
      if (type === 'anc') {
        this.form.anc_type = value
        if (value === 'yes' || value === 'Yes') { this.updateANC(ANC.Yes) } else { this.updateANC(ANC.No) }
      }
      if (type === 'adaptivesoundscape') {
        if (this.adaptiveSounscape === true) {
          this.form.adaptive_sound_scape = 'no'
        } else {
          this.form.adaptive_sound_scape = 'yes'
        }
      }

      this.$axios.post('/api/update-setting', this.form).then(({ data }) => {
        if (data.success) {
          this.$toast.success(data.message)
          this.form = data.setting
        }
      }).catch(() => {
        this.$toast.error('something went wrong while saving...')
      })
    }
  }
}
</script>

<style scoped>
.settings__sidebar {
  height: 100vh;
    position: sticky;
    left: 0;
    top: 0;
}

.settings__content {
  flex-grow: 1;
  position: relative;
}

.list-active{
  width: 100% !important;
  font-size: 18px;
}
.list-active.router-link-exact-active{
  background-color: #e9c046;
  color: white !important;
  width: 100% !important;
  border-radius: 0;
}
.list-active:active a{
  color: white !important;
}
.list-active:hover, .list-active:focus {
  border-radius: 0;
}
.main-logo img {
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .main-logo img {
    height: auto;
    width: 100%;
  }
}
.fivith-icon.router-link-exact-active{
  content: url('~/assets/image/Vector (4).png');
  background-color: #e9c046;
  border-radius: 5px;
  padding: 10px 10px;
  text-align: center;
}
.accordion-button-homebar::after {
  background-size: 16px;
  background-position-y: 4px;
}

@media only screen and (max-width: 768px) {
  .navbar-logo{
    width: 160px !important;
    padding-bottom: 10px;
  }
}
.drop-active{
  color: white !important;
  background-color: #e9c046;
  border-radius: 10px;
  margin-top: 2px;
}
</style>
