javascript

open Webapi.Dom;

open Element;

type state = {
  mapRef: ref(option(Dom.element)),
  sourceRef: ref(option(Dom.element)),
  containerRef: ref(option(Dom.element)),
  init: bool
};

type action =
  | GetRef;

type scrollProps = {
  scrollWidth: int,
  scrollHeight: int,
  scrollTop: int,
  scrollLeft: int
};

let defaultSourceDimensions: scrollProps = {
  scrollWidth: 1,
  scrollHeight: 1,
  scrollTop: 1,
  scrollLeft: 1
};

let component = ReasonReact.reducerComponent("ReasonReactExample");

let setMapRef = (theRef, {ReasonReact.state}) => state.mapRef := Js.Nullable.to_opt(theRef);

let setSourceRef = (theRef, {ReasonReact.state}) => state.sourceRef := Js.Nullable.to_opt(theRef);

let setContainerRef = (theRef, {ReasonReact.state}) =>
  state.containerRef := Js.Nullable.to_opt(theRef);

let scrollProperties = (element) => {
  /* let scrollWidth = Webapi.Dom.Element.scrollWidth(element); */
  Js.log(element);
  /* let scrollWidth = Webapi.Dom.Element.scrollWidth(element); */
  /* let scrollHeight = scrollHeight(el); */
  /* let scrollWidth = scrollWidth(el);
     let scrollHeight = scrollHeight(el);
     let scrollHeight = scrollHeight(el); */
  ()
};

let init = (state) => {
  let sourceDimensions =
    switch state.sourceRef^ {
    | Some(r) => scrollProperties(r)
    | None => ()
    };
  ()
  /* let {scrollWidth, scrollHeight, scrollTop, scrollLeft} =  */
};

let text = ReasonReact.stringToElement("minimap");

let initialState = () => {
  mapRef: ref(None),
  sourceRef: ref(None),
  containerRef: ref(None),
  init: false
};

let make = (~width, ~height, _children) => {
  ...component,
  initialState,
  reducer: ((), state) => ReasonReact.Update({...state, init: true}),
  didMount: ({state}) => {
    let newState = init(state);
    ReasonReact.NoUpdate
  },
  render: (self) =>
    <div className="minimap-root" ref=(self.handle(setSourceRef))>
      <div className="minimap" ref=(self.handle(setMapRef))> text </div>
      <div className="content-container" ref=(self.handle(setContainerRef))> _children </div>
    </div>
};

let default =
  ReasonReact.wrapReasonForJs(
    ~component,
    (_jsProps) => make(~width=_jsProps##width, ~height=_jsProps##height, _jsProps##children)
  );