const getGreenzone = function (socket, dropup) {
  const outerWindow = Traverse.owner(socket).dom().defaultView;
  // Include the dropup for this calculation because it represents the total viewable height.
  const viewportHeight = Height.get(socket) + Height.get(dropup);
  const acc = accountableKeyboardHeight(outerWindow);
  return viewportHeight - acc;
};

const takeover = function (viewport, contentBody, toolbar, dropup) {
  const outerWindow = Traverse.owner(viewport).dom().defaultView;
  const toolbarSetup = takeoverToolbar(toolbar);
  const toolbarHeight = Height.get(toolbar);
  const dropupHeight = Height.get(dropup);
  const viewportHeight = deriveViewportHeight(viewport, toolbarHeight, dropupHeight);

  const viewportSetup = takeoverViewport(toolbarHeight, viewportHeight, viewport);

  const dropupSetup = takeoverDropup(dropup, toolbarHeight, viewportHeight);

  let isActive = true;

  const restore = function () {
    isActive = false;
    toolbarSetup.restore();
    viewportSetup.restore();
    dropupSetup.restore();
  };

  const isExpanding = function () {
    const currentWinHeight = outerWindow.innerHeight;
    const lastWinHeight = getLastWindowSize(viewport);
    return currentWinHeight > lastWinHeight;
  };

  const refresh = function () {
    if (isActive) {
      const newToolbarHeight = Height.get(toolbar);
      const dropupHeight = Height.get(dropup);
      const newHeight = deriveViewportHeight(viewport, newToolbarHeight, dropupHeight);
      Attr.set(viewport, yFixedData, newToolbarHeight + 'px');
      Css.set(viewport, 'height', newHeight + 'px');

      Css.set(dropup, 'bottom', -(newToolbarHeight + newHeight + dropupHeight) + 'px');
      DeviceZones.updatePadding(contentBody, viewport, dropup);
    }
  };

  const setViewportOffset = function (newYOffset) {
    const offsetPx = newYOffset + 'px';
    Attr.set(viewport, yFixedData, offsetPx);
    // The toolbar height has probably changed, so recalculate the viewport height.
    refresh();
  };

  DeviceZones.updatePadding(contentBody, viewport, dropup);

  return {
    setViewportOffset,
    isExpanding,
    isShrinking: Fun.not(isExpanding),
    refresh,
    restore
  };
};

  const refresh = function () {
    if (isActive) {
      const newToolbarHeight = Height.get(toolbar);
      const dropupHeight = Height.get(dropup);
      const newHeight = deriveViewportHeight(viewport, newToolbarHeight, dropupHeight);
      Attr.set(viewport, yFixedData, newToolbarHeight + 'px');
      Css.set(viewport, 'height', newHeight + 'px');

      DeviceZones.updatePadding(contentBody, viewport, dropup);
    }
  };

export const resize = (editor: Editor, deltas, resizeType: ResizeTypes) => {
  const container = Element.fromDom(editor.getContainer());

  const dimensions = getDimensions(editor, deltas, resizeType, Height.get(container), Width.get(container));
  Obj.each(dimensions, (val, dim) => Css.set(container, dim, Utils.numToPx(val)));
  Events.fireResizeEditor(editor);
};

 const calcPosition = (offset: number = 0) => {
   // Note: The float container/editor may not have been rendered yet, which will cause it to have a non integer based positions
   // so we need to round this to account for that.
   const location = Location.absolute(Element.fromDom(editor.getBody()));
   return {
     top: Math.round(location.top() - Height.get(floatContainer.element())) + offset + 'px',
     left: Math.round(location.left()) + 'px'
   };
 };

  const reposition = function () {
    const toolbarHeight = Height.get(toolstrip);
    iosApi.run(function (api) {
      api.setViewportOffset(toolbarHeight);
    });

    refreshIosSelection();
    refreshView();
  };

    return Step.sync(function () {
      const element = Hierarchy.follow(Element.fromDom(editor.getBody()), path).getOrDie('could not find element');
      const height = Height.get(element);
      const width = Width.get(element);

      state.set({
        h: height,
        w: width
      });
    });

    return Logger.t('Set height and width', Step.sync(() => {
      const element = Hierarchy.follow(Element.fromDom(editor.getBody()), path).getOrDie('could not find element');
      const height = Height.get(element);
      const width = Width.get(element);

      state.set({
        h: height,
        w: width
      });
    }));

    return Step.sync(function () {
      const element = Hierarchy.follow(Element.fromDom(editor.getBody()), path).getOrDie('could not find element');
      const height = Height.get(element);
      const width = Width.get(element);

      const changedHeight = state.get().h + change.dh;
      const changedWidth = state.get().w + change.dw;

      Assertions.assertEq('height has changed as expected', true, looseEqual(changedHeight, height, 2));
      Assertions.assertEq('width has changed as expected', true, looseEqual(changedWidth, width, 2));
    });