import { computed, ref, toValue, watch } from 'vue'
import { storeToRefs } from 'pinia'

import { useMergedConfigStore } from 'src/stores/merged_config.js'

export function useInterfaceSizes() {
  const { mergedConfig } = storeToRefs(useMergedConfigStore())

  // Getting the actual font size in pixels since UI might have
  // a different scale
  const fontSizeSetting = computed(() => mergedConfig.value.textSize)
  const fontSize = ref(0)
  const updateFontSize = () => {
    const string = window
      .getComputedStyle(document.body)
      .getPropertyValue('font-size')
    fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
  }
  // Update font size if user changed UI scale
  watch(fontSizeSetting, updateFontSize, { immediate: true })

  const navbarSize = computed(() => {
    const string = fontSize.value * window
      .getComputedStyle(document.body)
      .getPropertyValue('--navbarSize')

    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
  })

  const panelHeaderSize = computed(() => {
    const string = fontSize.value * window
      .getComputedStyle(document.body)
      .getPropertyValue('--panelHeaderSize')

    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
  })

  return {
    fontSize,
    navbarSize,
    panelHeaderSize,
  }
}