<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
        <h1 class="h3 fw-bold text-center py-3">
          Timer Settings
        </h1>
        <div class="timer__settings">
          <!-- Timer Settings -->
          <v-list class="px-2 px-md-16">
            <!-- Work Time -->
            <div class="slider">
              <input
                id="gain-control"
                v-model="timer().settings.timer.work"
                type="range"
                min="5"
                max="60"
                step="5"
                data-toggle="tooltip"
                data-placement="top"
                :title="tooltipTitle"
                @wheel.prevent="changeVolumeOnWheel"
              >
              <span
                class="slider-progress-bar"
                :style="{ width: `${volume * 100}%` }"
              />
            </div>
            <!-- <v-list-item title="Work Sessions">
              <v-slider
                v-model="settings.timer.work"
                min="5"
                max="60"
                step="5"
                show-ticks
                thumb-label
                :color="timer().getCurrentColor"
                class="w-100"
                :ticks="sliderTicks.workTimer"
                :rules="rules.workRules"
              >
                <template #append>
                  <v-text-field
                    v-model="settings.timer.work"
                    hide-details
                    single-line
                    density="compact"
                    type="number"
                    style="width: 70px"
                    min="5"
                    max="60"
                  />
                </template>
              </v-slider> -->
            <!-- </v-list-item> -->
            <!-- Breaks Sessions -->
            <v-list-item
              v-for="value, i in ['short-break', 'long-break']"
              :key="i"
              :title="timer().settings.timer[value].text"
            >
              <v-slider
                v-model="settings.timer[value]"
                min="0"
                max="60"
                step="5"
                show-ticks
                thumb-label
                :color="timer().getCurrentColor"
                class="w-100"
                :ticks="sliderTicks.breakTimers"
                :rules="rules.breakRules"
              >
                <template #append>
                  <v-text-field
                    v-model="settings.timer[value]"
                    hide-details
                    single-line
                    density="compact"
                    type="number"
                    style="width: 70px"
                    min="0"
                    max="60"
                  />
                </template>
              </v-slider>
            </v-list-item>

            <v-list-item
              title="Max Sessions"
              subtitle="The number of work sessions before a long break"
            >
              <v-slider
                v-model="settings.maxSessions"
                min="1"
                max="10"
                step="1"
                show-ticks
                thumb-label
                :color="timer().getCurrentColor"
                class="w-100"
                :ticks="sliderTicks.maxSessions"
                :rules="rules.maxSessionsRules"
              >
                <template #append>
                  <v-text-field
                    v-model="settings.maxSessions"
                    hide-details
                    single-line
                    density="compact"
                    type="number"
                    style="width: 70px"
                    min="1"
                    max="10"
                  />
                </template>
              </v-slider>
            </v-list-item>
            <v-list-item>
              <v-checkbox
                v-model="timer().settings.autoStart"
                :color="timer().getCurrentColor"
                label="Auto Start Sessions"
                true-icon="mdi-timer-play-outline"
                false-icon="mdi-timer-play-outline"
              />
            </v-list-item>

            <v-divider />

            <!-- General Settings -->
            <v-list-subheader>General Settings</v-list-subheader>
            <v-list-item>
              <v-checkbox
                v-model="settings.notificationsEnabled"
                :color="timer().getCurrentColor"
                label="Notifications"
                true-icon="mdi-bell"
                false-icon="mdi-bell-off"
              />
            </v-list-item>
            <v-list-item>
              <v-checkbox
                v-model="timer().playSessionEndSound"
                :color="timer().getCurrentColor"
                label="Sounds"
                true-icon="mdi-volume-high"
                false-icon="mdi-volume-off"
              />
            </v-list-item>
            <!-- <v-list-item>
            <v-checkbox
              v-model="app().showThemeToggle"
              :color="timer().getCurrentColor"
              label="Show Theme Toggle"
              true-icon="mdi-theme-light-dark"
              false-icon="mdi-theme-light-dark"
            />
          </v-list-item> -->
          </v-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useTimerStore as timer } from '~~/stores/timer'

export default {
  name: 'TimerSettings',
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()

    const sliderTicks = reactive({
      workTimer: {
        5: '5',
        60: '60'
      },
      breakTimers: {
        0: '0',
        60: '60'
      },
      maxSessions: {
        1: '1',
        10: '10'
      }
    })
    // only the settings that need validation
    const settings = reactive({
      timer: {
        work: 25,
        'short-break': 5,
        'long-break': 15
      },
      maxSessions: 4,
      notificationsEnabled: false
    })
    const state = reactive({
      dialog: false,
      snackbar: false
    })

    // rules for validating inputs
    const rules = reactive({
      workRules: [
        (value) => {
          if (value >= 5 && value <= 60) { return true }

          if (value <= 0) { return "Are you kidding me? if you don't wanna work then just go find something better to do than playing with my settings." }
          if (value < 5) { return 'Do you want to work for less than 5 mins?! You can do better.' }
          return "Don't be so hard on yourself, work for an hour or less before taking a break."
        }
      ],
      breakRules: [
        (value) => {
          if (value >= 0 && value <= 60) { return true }

          if (value < 0) { return 'How tf would you take a negative break time you moron?' }
          return "That's too much time for a break, stop wasting your time."
        }
      ],
      maxSessionsRules: [
        (value) => {
          if (value >= 1) { return true }

          return "Max sessions can't be less than one!"
        }
      ]
    })

    // save settings to localstorage
    const saveSettings = () => {
      saveNotification()

      // validate user inputs before saving
      if (rules.workRules[0](settings.timer.work) === true) {
        timer().settings.timer.work.time = settings.timer.work
      }
      if (rules.breakRules[0](settings.timer['short-break']) === true) {
        timer().settings.timer['short-break'].time = settings.timer['short-break']
      }
      if (rules.breakRules[0](settings.timer['long-break']) === true) {
        timer().settings.timer['long-break'].time = settings.timer['long-break']
      }
      if (rules.maxSessionsRules[0](settings.maxSessions) === true) {
        timer().settings.maxSessions = settings.maxSessions
      }

      storeSettings()

      state.dialog = false
      state.snackbar = true
    }
    return { t, localePath }
  }
}

// watch(
//   () => state.dialog,
//   (dialog) => {
//     if (!dialog) { // if dialog is closed
//       saveSettings()
//     } else {
//       // retrieve settings from state when dialog is opened
//       // settings.notificationsEnabled = timer().showNotification
//       settings.maxSessions = timer().settings.maxSessions
//       for (const session of Object.keys(settings.timer)) {
//         settings.timer[session] = timer().settings.timer[session].time
//       }
//     }
//   }
// )

// get notification permission from the browser
// const saveNotification = () => {
//   const { isSupported, show } = useWebNotification({
//     title: 'Notifications enabled.'
//   })
//   if (isSupported.value) {
//     if (!timer().showNotification && settings.notificationsEnabled) { show() }
//   } else {
//     useNuxtApp().$logger.error('Your browser does not support notifications.')
//   }
//   timer().showNotification = settings.notificationsEnabled
// }

</script>
<style>
.dialog-bottom-transition-enter-active,
.dialog-bottom-transition-leave-active {
  transition: transform .1s ease-in-out;
}
.v-footer {
  row-gap: 0.4rem;
}
</style>
