interface IState {
  sticky: boolean;
}

export class HeaderBar extends React.Component<{}, IState> {
  sentinelRef: React.RefObject<HTMLDivElement>;
  observer: IntersectionObserver;

  state = { sticky: false };

  constructor(props: IProps) {
    super(props);

    this.sentinelRef = React.createRef();
  }

  componentDidMount() {
    this.observer = new IntersectionObserver(
      entries =>
        entries.forEach(entry =>
          this.setState({ sticky: entry.intersectionRatio !== 1 })
        ),
      { threshold: 1 }
    );
    this.observer.observe(this.sentinelRef.current);
  }

  componentWillUnmount() {
    if (typeof window === 'undefined') return;

    this.observer.unobserve(this.sentinelRef.current);
  }

  render() {
    const { sticky } = this.state;

    return (
      <Container
        sticky={sticky}
      >
        <Sentinel innerRef={this.sentinelRef} />
        <InnerContainerLeft fullHeight={fullHeightLeft}>
          {left}
        </InnerContainerLeft>
        <InnerContainerRight>{right}</InnerContainerRight>
      </Container>
    );
  }
}