import { browser } from '$app/environment';
import { writable, get, type Writable } from 'svelte/store';

type StateBin = Record<string, unknown>;

const STORAGE_KEY = 'stateBin';
const initialState = browser ? JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') : {};
const baseStore = writable<StateBin>(initialState);

if (browser)
  baseStore.subscribe((val) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  });

const createProxyStore = (store: Writable<StateBin>) => {
  return new Proxy(store, {
    get(target, prop: string) {
      if (prop in target) return (target as any)[prop];

      const derivedKey = writable(get(store)[prop]);

      derivedKey.subscribe((value) => {
        const state = get(store);
        const updatedState = { ...state };

        if (value === null || value === undefined) delete updatedState[prop];
        else updatedState[prop] = value;

        store.set(updatedState);
      });

      return derivedKey;
    },

    set(_, prop: string, value) {
      const state = get(store);
      const updatedState = { ...state };

      if (value === null || value === undefined) delete updatedState[prop];
      else updatedState[prop] = value;

      store.set(updatedState);

      return true;
    }
  });
};

const stateBin = createProxyStore(baseStore);

export default stateBin;