import { Link } from 'gatsby'
import { nIntervals } from '../shared/utility'
import Context from '../context'
import Masonry from 'react-masonry-component'
import Post from './post'
import React, { memo, useContext, useEffect, useRef, useState } from 'react'
import WindowSizeListener from 'react-window-size-listener'

export default memo(function Posts ({ edges: initialEdges, pathname }) {
  const { setState, ...state } = useContext(Context)

  const [mounted, setMounted] = useState('')

  useEffect(() => { setMounted(' posts--mounted') }, [])

  const edges = useRef([...initialEdges].sort((a, b) => a.node.frontmatter.sequence - b.node.frontmatter.sequence))

  const masonry = useRef(null)

  const index = edges.current.findIndex(({ node: { fields: { path } } }) => path === pathname)

  let posts

  const onClick (event) {
    setState({ ...state, postPosition: event.currentTarget.getBoundingClientRect() })
  }

  if ((index !== -1) && (index !== (initialEdges.length - 1))) {
    edges.current.push(edges.current.splice(index, 1)[0])
  }

  posts = ((pathname === '/') || (pathname === '/bryn/')) ? edges.current : edges.current.slice(0, -1)

  return (
    <WindowSizeListener onResize={() => nIntervals(() => { masonry.current.masonry.layout() }, 100, 5)}>
      <Masonry className={\`posts\${mounted}\`} ref={masonry}>
        {
          posts.map(({ node: { fields: { path }, frontmatter: post } }) => (
            <Link className="posts__link" key={post.id} onClick={onClick} to={path}>
              <Post classes="post" path={path} pathname={pathname} post={post}/>
            </Link>
          ))
        }
      </Masonry>
    </WindowSizeListener>
  )