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

interface StateBin {
  dueAnimeListOpen?: boolean;
  upcomingAnimeListOpen?: boolean;
  dueMangaListOpen?: boolean;
  completedAnimeListOpen?: boolean;
  completedMangaListOpen?: boolean;
  [key: string]: boolean | string | undefined;
}

const STORAGE_KEY = 'stateBin';
const baseStore = writable<StateBin>({});

if (browser) {
  localforage.getItem<StateBin>(STORAGE_KEY).then((value) => {
    if (value && typeof value === 'object') baseStore.set(value);
  });

  baseStore.subscribe((value) => {
    localforage.setItem(STORAGE_KEY, value);
  });
}

const createProxyStore = (store: Writable<StateBin>) => {
  return new Proxy(store, {
    get(target, prop: string) {
      if (prop in target) return (target as unknown as Record<string, unknown>)[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;