import { getRect } from "css-box-model";
import { origin } from "../../state/position";
import getWindowScroll from "./get-window-scroll";
import getMaxWindowScroll from "./get-max-window-scroll";
import getDocumentElement from "../get-document-element";

const getViewport = () => {
  const scroll = getWindowScroll();
  const maxScroll = getMaxWindowScroll();
  const top = scroll.y;
  const left = scroll.x;

  // window.innerHeight: includes scrollbars (not what we want)
  // document.clientHeight gives us the correct value when using the html5 doctype
  const doc = getDocumentElement();
  // Using these values as they do not consider scrollbars
  // padding box, without scrollbar
  const width = doc.clientWidth;
  const height = doc.clientHeight;

  // Computed
  const right = left + width;
  const bottom = top + height;
  const frame = getRect({
    top,
    left,
    right,
    bottom
  });
  const viewport = {
    frame,
    scroll: {
      initial: scroll,
      current: scroll,
      max: maxScroll,
      diff: {
        value: origin,
        displacement: origin
      }
    }
  };
  return viewport;
};

export default getViewport;
