import { ref, computed, onBeforeMount } from 'vue';

import { getStatusBarHeight } from '../../common/utils/status-bar-height';


export function useStatusBarHeight() {
  const statusBarHeight = ref(20);

  const headerHeight = computed(() => statusBarHeight.value + 44);
  const headerHeightStyle = computed(() => `height: ${headerHeight.value}px`);

  const init = () => {
    getStatusBarHeight()
      .then((res) => {
        statusBarHeight.value = res;
      })
      .catch(() => {});
  };

  init();

  onBeforeMount(() => {
    init();
  });


  return {
    statusBarHeight,
    headerHeight,
    headerHeightStyle,
  };
}