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

const cssVar = {
  '--text-xs': '20rpx',
  '--text-sm': '24rpx',
  '--text-base': '28rpx',
  '--text-lg': '32rpx',
  '--text-xl': '36rpx',

}

const elderCssVar = {
  '--text-xs': '28rpx',
  '--text-sm': '32rpx',
  '--text-base': '42rpx',
  '--text-lg': '48rpx',
  '--text-xl': '52rpx',
}

export default function useElder() {
  const elderMode = ref(String(uni.getStorageSync('elderMode')) === 'true');
  const elderVarStyle = computed(() => getStyleString(elderMode.value ? elderCssVar : cssVar));
  const elderClass = computed(() => elderMode.value ? 'caring-mode-active' : ''); // caring-mode 关爱模式（避免和初版的elder-mode-active类名重复）

  function getStyleString(cssVarObject) {
    return Object.entries(cssVarObject).map(([key, value]) => `${key}:${value}`).join(';');
  }

  function toggle() {
    elderMode.value = !elderMode.value;
  }

  watch(elderMode, (newVal) => {
    uni.setStorageSync('elderMode', newVal);
    const app = getApp();
    if (app && app.globalData) {
      app.globalData.elderMode = elderMode.value;
    }
  }, { immediate: true });

  return {
    elderMode,
    elderClass,
    elderVarStyle,
    toggle
  };
};