// 1. 스토어 생성
const store = createStore(counterReducer)

// 2. render 함수가 store 구독
store.subscribe(render)

// 3. render 함수
function render() {
  const state = store.getState()
  document.getElementById("value").innerHTML = state.value.toString()
}

// 4. render실행
render()

// 5. html 요소에 이벤트 리스너 등록
document.getElementById("increment").addEventListener("click", function () {
  store.dispatch({ type: "counter/incremented" })
})

class App extends React.Component {
  componentDidMount() {
    this.unsubscribe = store.subscribe(this.handleChange.bind(this))
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  handleChange() {
    this.forceUpdate()
  }

  increaseCount() {
    store.dispatch({ type: "counter/incremented" })
  }

  render() {
    return (
      <div>
        <div>{store.getState().count}</div>
        <button onClick={this.increaseCount}>+</button>
      </div>
    )
  }
}

// reducer 함수
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case "counter/incremented":
      return { ...state, value: state.value + 1 }
    default:
      return state
  }
}

// store 생성
const store = createStore(counterReducer)

// root 컴포넌트
export function App() {
  const count = useSelector(state => state.counter.value)

  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))

// store가 포함된 Provider로 감싼 root 컴포넌트 렌더링
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

function Provider({ store }) {
  const subscription = createSubscription(store) // 스토어 구독과 관련된 기능 제공
  const contextValue = { store, subscription }
  const Context = React.createContext(null)

  return <Context.Provider value={contextValue}>{children}</Context.Provider>
}

function useReduxContext() {
  return React.useContext(context)
}

const useDispatch = () => {
  const { store } = useReduxContext()
  return store.dispatch
}

const useSelector = (
  selector,
  equalityFnOrOptions,
) => {
  const equalityFn = equalityFnOrOptions || ((a, b) => a === b)

  const {
    store,
    subscription,
  } = useReduxContext()

  const wrappedSelector = React.useCallback<typeof selector>(
    (state) => {
      return selector(state)
    },
    [selector],
  )

  const selectedState = useSyncExternalStoreWithSelector(
    // store.subscribe 함수와 비슷한 기능을 합니다.
    subscription.addNestedSub,
    store.getState,
    wrappedSelector,
    equalityFn,
  )

  return selectedState
}

export function useSyncExternalStoreWithSelector(
  subscribe,
  getSnapshot,
  selector,
  isEqual
) {
  const getSelection = useMemo(() => {
    let hasMemo = false
    let memoizedSnapshot
    let memoizedSelection: Selection
    const memoizedSelector = (nextSnapshot: Snapshot) => {
      // 처음 Selector 실행시 초기화 하는 로직입니다.
      if (!hasMemo) {
        hasMemo = true
        memoizedSnapshot = nextSnapshot
        memoizedSelection = selector(nextSnapshot)
        return memoizedSelection
      }

      // 이전 상태를 재사용할수 있다면 재사용 하기위해 변수에 할당합니다.
      const prevSnapshot = memoizedSnapshot
      const prevSelection = memoizedSelection

      // 이전 상태와 다음 상태를 얕은 비교하여 같은경우 이전 selection 결과를 그대로 리턴합니다.
      if (is(prevSnapshot, nextSnapshot)) {
        return prevSelection
      }

      // seletor 함수를 실행해 새로운 selection을 만듭니다.
      const nextSelection = selector(nextSnapshot)

      // 비교함수가 있는경우 이를 이용해 Selection을 비교한뒤 같다면 이전 Selection을 내보냅니다.
      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
        return prevSelection
      }

      //예외 조건에 걸리지 않았다면 스냅샷 결과를 저장합니다.
      memoizedSnapshot = nextSnapshot
      memoizedSelection = nextSelection
      return nextSelection
    }

    // 앞서 살펴본 Selector 함수를 실행하는 함수를 리턴합니다.
    return () => memoizedSelector(getSnapshot())
  }, [getSnapshot, selector, isEqual])

  const value = useSyncExternalStore(subscribe, getSelection)

  return value
}

export function useSyncExternalStore(
  subscribe
  getSnapshot
) {
  const value = getSnapshot();
  const [{inst}, forceUpdate] = useState({inst: {value, getSnapshot}});

  useLayoutEffect(() => {
    inst.value = value;
    inst.getSnapshot = getSnapshot;

    if (checkIfSnapshotChanged(inst)) {
      forceUpdate({inst});
    }
  }, [subscribe, value, getSnapshot]);

  useEffect(() => {
    if (checkIfSnapshotChanged(inst)) {
      forceUpdate({inst});
    }
    const handleStoreChange = () => {
      if (checkIfSnapshotChanged(inst)) {
        forceUpdate({inst});
      }
    };
    return subscribe(handleStoreChange);
  }, [subscribe]);

  return value;
}

function checkIfSnapshotChanged(inst) {
  const latestGetSnapshot = inst.getSnapshot;
  const prevValue = inst.value;
  try {
    const nextValue = latestGetSnapshot();
    return !is(prevValue, nextValue);
  } catch (error) {
    return true;
  }
}