import React, {
  createElement,
  createContext as createContextOrig,
  useContext as useContextOrig,
  useLayoutEffect,
  useReducer,
  useRef,
  useState,
} from "preact/compat";

function createContext() {
  const context = createContextOrig();

  const ProviderOrig = context.Provider;
  context.Provider = ({ value, children }) => {
    const valueRef = useRef(value);
    const contextValue = useRef();

    if (!contextValue.current) {
      contextValue.current = {
        value: valueRef,
        listener: null,
      };
    }

    useLayoutEffect(() => {
      valueRef.current = value;
      if (contextValue.current.listener) {
        contextValue.current.listener([value]);
      }
    }, [value]);
    return <ProviderOrig value={contextValue.current}>{children}</ProviderOrig>;
  };

  return context;
}

function useContextSelector(context) {
  const contextValue = useContextOrig(context);
  const {
    value: { current: value },
  } = contextValue;
  const [state, dispatch] = useReducer(
    () => {
      return {
        value,
      };
    },
    {
      value,
    }
  );
  useLayoutEffect(() => {
    contextValue.listener = dispatch;
  }, []);
  return state.value;
}

const context = createContext(null);

function Child() {
  const [count, setState] = useContextSelector(context);
  const [c, setC] = useState(0);
  return (
    <div>
      <div>Context count: {count}</div>
      <div>Local count: {c}</div>
      <button
        onClick={() => {
          setC((s) => s + 1);
          setState((s) => s + 1);
        }}
      >
        +1
      </button>
    </div>
  );
}

// Render this
export function App() {
  const [state, setState] = useState(0);
  return (
    <context.Provider value={[state, setState]}>
      <Child />
    </context.Provider>
  );
}