const useCounter = (initCount = 0) => {
  const [counter, setCounter] = useState(initCount);
 
  return {
    inc: () => setCounter((prev) => prev + 1),
    counter,
  };
};

// counter.ts
export type State = { counter: number };
 
// 상태를 아예 컴포넌트 밖에 선언했다. 각 컴포넌트가 이 상태를 바라보게 할 것이다.
let state: State = {
  counter: 0,
};
 
// getter
export function get(): State {
  return state;
}
 
// useState와 동일하게 구현하기 위해 게으른 초기화 함수나 값을 받을 수 있게 했다.
type Initializer<T> = T extends any ? T | ((prev: T) => T) : never;
 
// setter
export const set = <T>(nextState: Initializer<T>) => {
    state = typeof nextState === 'function' ? nextState(state) : nextState
}
 
// Counter
const Counter() {
    const state = get()
 
    const handleClick = () => {
        set(prev: State => ({counter: prev.counter + 1}))
    }
 
    return ...
}

type Initializer<T> = T extends any ? T | (prev: T => T):never
 
type Store<State> = {
    get: () => State // 최신값을 가져오는 함수
    set: (action: Initializer<State>) => State // useState와 동일하게 값 또는 함수를 받을 수 있도록
    subscribe: (callback: () => void) => () => void // store의 변경을 감지하고 싶은 컴포넌트들이 자신의 callback을 등록해두는 곳
}
/**
 * 이 스토어를 참조하는 컴포넌트는 subscribe에 컴포넌트 자기 자신을 렌더링하는 코드를 추가해서
 * 컴포넌트가 리렌더링을 실행할 수 있게 만들 것
 */

export const createStore = <State extends unknown>(initialState: Initializer<State>) => {
  // state는 스토어 내부에서 보관해야 하므로 변수로 선언
  let state = typeof initialState !== 'function' ? initialState : initialState();
 
  // callbacks는 자료형에 관계없이 유일한 값을 저장할 수 있는 Set을 사용
  const callbacks = new Set<() => void>();
  // 언제든 get이 호출되면 최신값을 가져올 수 있도록 함수로 만든다.
  const get = () => state
  const set = (nextState: State | (prev: State => State)) => {
    state = typeof nextState === 'function' ? (nextState as(prev: State => State))(state) : nextState
    // 값의 설정이 발생하면 콜백 목록ㅇ르 순회하면서 모든 콜백을 실행한다.
    callbacks.forEach(callback => callback())
    return state
  }
 
  const subscribe = (callback: () => void) => {
    // 받은 함수를 콜백 목록에 추가
    callbacks.add(callback)
    // 클린업 실행 시 이를 삭제해서 반복적으로 추가되는 것을 막는다.
    return () => {
        callbacks.delete(callback)
    }
  }
  return { get, set, subscribe }
};

export const useStore = <State extends unknown>(store: Store<State>) => {
  const [state, setState] = useState<State>(() => store.get()); // 컴포넌트의 렌더링을 유도하기 위해 useState 사용
 
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      // store의 값이 변경될 때 setState할 수 있도록
      setState(store.get());
    });
    return unsubscribe;
  }, [store]);
  return [state, store.set] as const;
};

export const useStoreSelector = <State extends unknown, Value extends unknown>(
  store: Store<State>,
  selector: (state: State) => Value,
) => {
  const [state, setState] = useState(() => selector(store.get()));
 
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const value = selector(store.get());
      setState(value);
    });
    return unsubscribe;
  }, [store, selector]);
 
  return state;
};

// Context를 생성하면, 자동으로 스토어도 함께 생성한다.
export const CounterStoreContext = createContext<Store<CounterStore>>(
  createStore<CounterStore>({ count: 0, text: 'hello' }),
);
 
type CounterStoreProviderProps = PropsWithChildren<{ initialState: CounterStore }>;
 
export const CounterStoreProvider = ({ initialState, children }: CounterStoreProviderProps) => {
  const storeRef = useRef<Store<CounterStore>>();
 
  // 스토어를 생성한 적이 없다면 최초에 한 번 생성한다.
  if (!storeRef.current) {
    storeRef.current = createStore(initialState);
  }
 
  return <CounterStoreContext.Provider value={storeRef.current}>{children}</CounterStoreContext.Provider>;
};

export const useCounterContextSelector = <State extends unknown>(selector: (state: CounterStore) => State) => {
  const store = useContext(CounterStoreContext);
  // 리액트에서 제공하는 훅 사용 ..-> 없음..?
  const subscription = useSubscription(
    useMemo(
      () => ({
        getCurrentValue: () => selector(store.get()),
        subscribe: store.subscribe,
      }),
      [store, selector],
    ),
  );
  return [subscription, store.set] as const;
};

const RecoilRoot = (props: Props): React.Node => {
  const { override, ...restProps } = props;
 
  const ancestorStoreRef = useStoreRef(); // 상태값을 저장하는 스토어
  if (override === flase && ancestorStoreRef.current !== defaultStore) {
    return props.children;
  }
  return <RecoilRoot_INTERNAL {...restProps} />;
};
 
// useStoreRef
const AppContext = React.createContext<StoreRef>({ current: defaultStore });
const useStoreRef = (): StoreRef => useContext(AppContext);

export function atom<Value, Update, Result extends void | Promise<void>>(
  read: Value | Read<Value>,
  write?: Write<Update, Result>,
) {
  const key = `atom${++keyCount}`;
  const config = {
    toString: () => key,
  } as WriableAtom<Value, Update, Result> & { init?: Value };
 
  if (typeof read === 'function') {
    config.read = read as Read<Value>;
  } else {
    config.init = read;
    config.read = (get) => get(config);
    config.write = (get, set, update) => set(config, typeof update === 'function' ? update(get(config)) : update);
  }
 
  if (write) {
    config.write = write;
  }
  return config;
}