<script lang="ts" setup>
import { ref } from 'vue';
import { featureEnableBlock } from "@/utils/storage"

const isEnabled = ref(false)
let unwatchStorage: (() => void | undefined)

onMounted(async() => {
  isEnabled.value = await featureEnableBlock.getValue()

  unwatchStorage = featureEnableBlock.watch((newValue) => {
    if (newValue !== isEnabled.value) {
      isEnabled.value = newValue
    }
  })
})

onUnmounted(() => {
  if (unwatchStorage) unwatchStorage();
})

watch(isEnabled, async (newValue) => {
  await featureEnableBlock.setValue(newValue)
})

const toggleOnOff = () => {
  isEnabled.value = !isEnabled.value
}
</script>

<template>
  <button @click="toggleOnOff" class="button-toggle">
      <img src="/icon/128.png" class="logo" :class="{ 'logo-on': isEnabled }" alt="let me focus logo" />
  </button>
  <br/>
  {{ isEnabled ? '[on]' : '[off]' }}
</template>

<style scoped>
.button-toggle {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}
.button-toggle .logo {
    width: 80%;
    cursor: pointer;
}

.button-toggle .logo-on {
    filter: drop-shadow(0 0 1em #ffffff);
}
</style>
