import { useEffect, useState, useRef } from 'react';

export default function ({ className, children, target }: Props) {
  const targetElRef = useRef<HTMLElement>(null);
  const addonRef = useRef<HTMLDivElement>(null);
  const [showing, setShowing] = useState<boolean>(false);

  const toggleShowing = () => setShowing(s => !s);

  useEffect(() => {
    let targetEl = document.getElementById(target.key);
    console.log("got target el", targetEl, target);
    if(targetEl) {
      console.log("got targetEl", targetEl);
      targetElRef.current = targetEl;
      targetElRef.current.addEventListener('click', toggleShowing);
    }
  }, [target]);

  useEffect(() => {
    console.log("Received new showing", showing);
    if(addonRef && addonRef.current) {
      addonRef.current.style.opacity = showing ? 1 : 0;
    }
  }, [showing])

  return (
    <div className={className} ref={addonRef}>
      <div className="fill">{children}</div>
    </div>
  );
}