import { createReduxStore } from '@wordpress/data';
import type { ItemProps } from '@components/DesignPanel/types';
import {
  newItems,
  hydrateItem,
  upsertItem,
  deleteItem,
  getItems,
  toggleDefaultItem,
} from '@store/storeHelpers';

const DEFAULT_STATE = {
  presets: [] as ItemProps[],
};

const actions = {
  hydrateItem,
  upsertItem,
  deleteItem,
  toggleDefaultItem,
  getItems,
};

export const presetStore = createReduxStore('biteStore/presets', {
  reducer(state = DEFAULT_STATE, action) {
    const presets = [...state.presets];
    switch (action.type) {
      case 'HYDRATE':
        const items = newItems(presets, action);
        return {
          ...state,
          presets: items,
        };
    }
    return state;
  },
  actions,
  selectors: {
    getFiltered(state: any, platform: string, blockname: string) {
      return state.presets.filter(
        (item: ItemProps) =>
          item.platform === platform && item.blockname === blockname
      );
    },
    getAll(state: any) {
      return state.presets;
    },
    getItem(state: any, id: number) {
      return state.presets.find((item: ItemProps) => item.id === id);
    },
  },
  resolvers: {
    *getAll(): Generator<any, void, any> {
      getItems('preset').then((items: ItemProps) => {
        wp.data.dispatch('biteStore/presets').hydrateItem(items, 'init');
      });
    },
  },
});