import { useState, useMemo, useEffect } from 'react'
import { createContainer } from 'unstated-next'

const useActivity = () => {
  const [scrollTop, setScrollTop] = useState(0);
  const [containerNode, setContainerNode] = useState();
  const [clientHeight, setClientHeight] = useState(0);
  const [titleRefs, setTitleRefs] = useState({});

  useEffect(() => {
    const node = document.getElementById('main-view');
    setContainerNode(node);
    setClientHeight(node.clientHeight)
    node.addEventListener('scroll', (e) => {
      setScrollTop(e.target.scrollTop);
    })
  }, [])

  const action = useMemo(() => {
    return {
      scrollTop,
      clientHeight,
      titleRefs,
      setTitleRefs,
      containerNode,
      setContainerNode,
    }
  }, [scrollTop, setScrollTop, clientHeight, titleRefs, setTitleRefs, containerNode, setContainerNode])
  return action
}
const Activity = createContainer(useActivity);
export default Activity;
