import { writable } from "svelte/store";

export type ViewMode = "code" | "preview" | "about";

export interface UIState {
  viewMode: ViewMode;
  previousViewMode: "code" | "preview";
  error: string | null;
  isAnimating: boolean;
}

function createUIStore() {
  const { subscribe, update, set } = writable<UIState>({
    viewMode: "code",
    previousViewMode: "code",
    error: null,
    isAnimating: false,
  });

  return {
    subscribe,
    setViewMode: (viewMode: ViewMode) =>
      update((state) => {
        const previousViewMode =
          state.viewMode === "about"
            ? state.previousViewMode
            : state.viewMode === "code" || state.viewMode === "preview"
              ? state.viewMode
              : state.previousViewMode;
        return { ...state, viewMode, previousViewMode };
      }),
    setError: (error: string | null) =>
      update((state) => ({ ...state, error })),
    setAnimating: (isAnimating: boolean) =>
      update((state) => ({ ...state, isAnimating })),
    toggleViewMode: () =>
      update((state) => ({
        ...state,
        viewMode: state.viewMode === "code" ? "preview" : "code",
        previousViewMode: state.viewMode === "code" ? "preview" : "code",
      })),
    showAbout: () =>
      update((state) => ({
        ...state,
        previousViewMode:
          state.viewMode === "code" || state.viewMode === "preview"
            ? state.viewMode
            : state.previousViewMode,
        viewMode: "about",
      })),
    hideAbout: () =>
      update((state) => ({
        ...state,
        viewMode: state.previousViewMode,
      })),
    reset: () =>
      set({
        viewMode: "code",
        previousViewMode: "code",
        error: null,
        isAnimating: false,
      }),
  };
}

export const uiStore = createUIStore();