import { ref, Ref, watch } from "vue";
import get from "./get";
import getSession from "./get_session";
import put from "./put";
import putSession from "./put_session";

export function localRef<T = any>(
  key: string,
  defaultValue: T,
  session: boolean = false
): Ref<T> {
  let myValue = (session ? getSession(key) : get(key)) as T | undefined;
  const value = ref<T>(myValue ?? defaultValue);
  watch(
    value,
    (newVal) => {
      if (session) {
        putSession(key, newVal);
      } else {
        put(key, newVal);
      }
    },
    { deep: true }
  );
  return value as Ref<T>;
}