import useReducer, { ReducerArgs } from 'use-typed-reducer';

interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

function Counter() {
  const [state, actions] = useReducer(initialState, (get) => ({
    reset: () => initialState,
    increment: () => ({ count: state.count + 1 }),
    decrement: () => ({ count: state.count - 1 }),
    setCount: (value: number) => ({ count: value })
  }));

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => actions.increment()}>+</button>
      <button onClick={() => actions.decrement()}>-</button>
      <button onClick={() => actions.reset()}>Reset</button>
      <button onClick={() => actions.setCount(10)}>Set to 10</button>
    </div>
  );
}

const asyncReducer = (get) => ({
  fetchUser: async (userId: string) => {
    const user = await fetch(`/api/users/${userId}`).then(res => res.json());
    return ({ ...get.state(), user, loading: false });
  },
  // you can omit properties to merge with the previous state
  setLoading: (loading: boolean) => ({ loading })
});

const reducerWithContext = ({ state, props, initialState, previousState }) => ({
  updateWithProps: () => (currentState: State) => ({
    ...currentState,
    value: props().multiplier * currentState.value
  }),
  revertToPrevious: () => () => previousState(),
  resetToInitial: () => () => initialState
});

import { createGlobalReducer } from 'use-typed-reducer';

interface AppState {
  user: User | null;
  theme: 'light' | 'dark';
}

const globalStore = createGlobalReducer(
  { user: null, theme: 'light' },
  () => ({
    setUser: (user: User) => ({ user }),
    toggleTheme: () => ({
      theme: state.theme === 'light' ? 'dark' : 'light'
    })
  })
);

// Use in any component
function UserProfile() {
  const [state, actions] = globalStore(
    state => ({ user: state.user }), // selector
    (a, b) => a.user?.id === b.user?.id // custom comparator
  );

  return (
    <div>
      {state.user ? (
        <p>Welcome, {state.user.name}!</p>
      ) : (
        <button onClick={() => actions.setUser({ id: 1, name: 'John' })}>
          Login
        </button>
      )}
    </div>
  );
}

import { createLoggerPlugin, createLocalStoragePlugin } from 'use-typed-reducer';

const [state, actions] = useReducer(
  initialState,
  reducer,
  {
    debug: true, // Enable performance debugging
    postMiddleware: [
      createLoggerPlugin('MyComponent'), // Console logging
      createLocalStoragePlugin('app-state') // Auto-save to localStorage
    ]
  }
);

const customMiddleware = (state, previousState, debug) => {
  console.log(`Action "${debug.method}" took ${debug.time}ms`);

  // Transform state
  return {
    ...state,
    lastUpdated: Date.now()
  };
};

const [state, actions] = useReducer(initialState, reducer, {
  postMiddleware: [customMiddleware]
});

import {
  createLocalStoragePlugin,
  createSessionStoragePlugin,
  createStoragePlugin
} from 'use-typed-reducer';

// Built-in plugins
const localStorage = createLocalStoragePlugin('my-app-state');
const sessionStorage = createSessionStoragePlugin('temp-state');

// Custom storage plugin
const customStorage = createStoragePlugin(() => ({
  set: (key, value) => {
    // Custom storage logic
    myCustomStorage.save(key, value);
  }
}));

const [state, actions] = useReducer(initialState, reducer, {
  postMiddleware: [localStorage('user-preferences')]
});

{
  props?: Props;              // Props passed to reducer
  debug?: boolean;            // Enable debug mode
  postMiddleware?: Array;     // Middleware functions
  interceptor?: Array;        // State interceptors
}