import { createReduxStore } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import { registerBlockbiteStyles } from '@core/blockStyles';
import type { Util } from '@components/Bites/BitesPurgeHelpers';

const DEFAULT_STATE = {
  device: '',
  editorType: null as 'edit-post' | 'edit-site' | null,
  editorMode: null as 'visual' | 'text' | null,
  modal: {
    bitesLibrary: false,
  },
  theme: {
    colors: [] as any,
    fonts: [] as any,
    fontSizes: [] as any,
    headings: [] as any,
  },
  themeOptin: {
    colors: false,
    fonts: false,
    fontSizes: false,
    headings: false,
  },
  themeInit: false,
  utils: [] as any,
  blockStyles: [] as any,
  tailwindConfigChange: '' as string,
};

export const biteStore = createReduxStore('biteStore/editor', {
  reducer(state = DEFAULT_STATE, action) {
    switch (action.type) {
      case 'SET_DEVICE':
        return {
          ...state,
          device: action.value,
          tailwindConfigChange: `device-${action.value}`,
        };
      case 'TOGGLE_MODAL': {
        const { id, value } = action.payload;
        return {
          ...state,
          modal: {
            ...state.modal,
            [id]: value,
          },
        };
      }
      case 'SET_THEME':
        return {
          ...state,
          theme: action.value,
          tailwindConfigChange: `theme-tokens-${Date.now()}`,
        };
      case 'SET_THEME_OPTIN':
        return {
          ...state,
          themeOptin: action.value,
        };
      case 'SET_UTILS':
        return {
          ...state,
          utils: action.value,
          tailwindConfigChange: `utils-${Date.now()}`,
        };
      case 'UPDATE_UTILS':
        const updatedUtils = state.utils.map((newUtil: Util) => {
          // find the util in the payload
          const existingUtil = action.value.find(
            (util: Util) => util.id === newUtil.id
          );
          // if it exists, replace
          if (existingUtil) {
            return existingUtil;
          }
          return newUtil;
        });

        return {
          ...state,
          utils: updatedUtils,
          tailwindConfigChange: `utils-${Date.now()}`,
        };

      case 'SET_SETTINGS':
        return {
          ...state,
          theme: action.value.theme,
          themeOptin: action.value.themeOptin,
          themeInit: action.value.themeInit,
          utils: action.value.utils,
          blockstyles: action.value.blockstyles,
          nativeGlobalStyles: action.value.nativeGlobalStyles,
          tailwindConfigChange: 'theme',
        };
      case 'SET_EDITOR_TYPE':
        return {
          ...state,
          editorType: action.value,
          tailwindConfigChange: `editor-type-${action.value}`,
        };
      case 'SET_EDITOR_MODE':
        return {
          ...state,
          editorMode: action.value,
          tailwindConfigChange: `editor-mode-${action.value}`,
        };
    }
    return state;
  },
  actions: {
    setDevice(value: string) {
      return {
        type: 'SET_DEVICE',
        value: value,
      };
    },
    setPostType(value: string) {
      return {
        type: 'SET_POST_TYPE',
        value: value,
      };
    },
    setTheme(value: any) {
      return {
        type: 'SET_THEME',
        value: value,
      };
    },
    setThemeOptin(value: any) {
      return {
        type: 'SET_THEME_OPTIN',
        value: value,
      };
    },
    setUtils(value: any) {
      return {
        type: 'SET_UTILS',
        value: value,
      };
    },
    updateUtils(value: any) {
      return {
        type: 'UPDATE_UTILS',
        value: value,
      };
    },
    setSettings(values: any) {
      return {
        type: 'SET_SETTINGS',
        value: values,
      };
    },
    setEditorType(value: string) {
      return {
        type: 'SET_EDITOR_TYPE',
        value: value,
      };
    },
    setEditorMode(value: string) {
      return {
        type: 'SET_EDITOR_MODE',
        value: value,
      };
    },
  },
  selectors: {
    getDevice(state: any) {
      return state.device;
    },
    getEditorType(state: any) {
      return state.editorType;
    },
    getEditorMode(state: any) {
      return state.editorMode;
    },
    getTheme(state: any) {
      return state.theme;
    },
    getThemeOptin(state: any) {
      return state.themeOptin;
    },
    getThemeInit(state: any) {
      return state.themeInit;
    },
    getUtils(state: any) {
      return state.utils;
    },
    getAll(state: any) {
      return state;
    },
    getTailwindConfigChange(state: any) {
      return state.tailwindConfigChange;
    },
    getUtilById(state: any, id: string) {
      return state.utils.find((util: Util) => util.id === id);
    },
    getModalState(state: any, id: string) {
      return state.modal?.[id] ?? false;
    },
  },
  resolvers: {
    async getAll(): Promise<void> {
      try {
        const response: any = await apiFetch({
          path: '/blockbite/v1/editor-settings',
        });

        const themeContent = response.designtokens || {};
        const optinContent = response.designtokensOptin || {};
        const utilsContent = response.utils || [];
        const blockStylesContent = response.blockStyles || [];

        wp.data.dispatch('biteStore/editor').setSettings({
          theme: themeContent,
          themeOptin: optinContent,
          themeInit: true,
          utils: utilsContent,
          blockStyles: blockStylesContent,
        });

        if (blockStylesContent.length) {
          registerBlockbiteStyles(blockStylesContent);
        }
      } catch (error) {
        console.error('Error fetching editor settings:', error);
      }
    },
  },
});