import type { FunctionalComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';

const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
  const itemOffsets = useRef([]);
  const [activeId, setActiveId] = useState<string>(undefined);

  useEffect(() => {
    const getItemOffsets = () => {
      const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
      itemOffsets.current = Array.from(titles).map((title) => ({
        id: title.id,
        topOffset: title.getBoundingClientRect().top + window.scrollY,
      }));
    };

    getItemOffsets();
    window.addEventListener('resize', getItemOffsets);

    return () => {
      window.removeEventListener('resize', getItemOffsets);
    };
  }, []);

  return (
    <>
      <h2 class="heading">On this page</h2>
      <ul>
        <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
          <a href="#overview">Overview</a>
        </li>
        {headers
          .filter(({ depth }) => depth > 1 && depth < 4)
          .map((header) => (
            <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
              <a href={`#${header.slug}`}>{header.text}</a>
            </li>
          ))}
      </ul>
    </>
  );
};

export default TableOfContents;
e7bc9&amp;follow=1'>commit</a><a href='/ansg191/v2/diff/vendor/golang.org/x/net/README.md?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>diff</a></td><td class='form'><form class='right' method='get' action='/ansg191/v2/log/vendor/golang.org/x/net/README.md'>
<input type='hidden' name='id' value='c8138351c9737e3286a128c78f39e4f8a23e7bc9'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/ansg191/v2/log/?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>root</a>/<a href='/ansg191/v2/log/vendor?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>vendor</a>/<a href='/ansg191/v2/log/vendor/golang.org?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>golang.org</a>/<a href='/ansg191/v2/log/vendor/golang.org/x?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>x</a>/<a href='/ansg191/v2/log/vendor/golang.org/x/net?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>net</a>/<a href='/ansg191/v2/log/vendor/golang.org/x/net/README.md?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;follow=1'>README.md</a> (<a href='/ansg191/v2/log/vendor/golang.org/x/net/README.md?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9'>unfollow</a>)</div><div class='content'><table class='list nowrap'><tr class='nohover'><th class='left'>Age</th><th class='left'>Commit message (<a href='/ansg191/v2/log/vendor/golang.org/x/net/README.md?id=c8138351c9737e3286a128c78f39e4f8a23e7bc9&amp;showmsg=1&amp;follow=1'>Expand</a>)</th><th class='left'>Author</th><th class='left'>Files</th><th class='left'>Lines</th></tr>
<tr><td><span title='2018-01-29 20:34:00 -0800'>2018-01-29</span></td><td><a href='/ansg191/v2/commit/logger/logger.go?id=24a2f472ec8593b4734e91ac15ee5503d16ae63a&amp;follow=1'>Add flag to enable debug logging</a></td><td><img src='//www.gravatar.com/avatar/0a02066c0046ce77af47b86c30cd720d?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Rogier Lommers
</td><td>2</td><td><span class='deletions'>-7</span>/<span class='insertions'>+64</span></td></tr>
<tr><td><span title='2018-01-25 20:13:38 -0800'>2018-01-25</span></td><td><a href='/ansg191/v2/commit/ui/static/js/app.js?id=40eb1b10fe40bd23e40708f734b74b992547d8ca&amp;follow=1'>Improve unread counter updates</a></td><td><img src='//www.gravatar.com/avatar/bd3aea425971aff6333afb6354e67d92?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Mahendra Kalkura
</td><td>1</td><td><span class='deletions'>-6</span>/<span class='insertions'>+35</span></td></tr>