linking.re

open ReactNative;

/* Variables */
let windowWidth = (Dimensions.get `window)##width;

let initialRegion = {
  "latitude": 47.651857,
  "longitude": (-122.3552919),
  "latitudeDelta": 0.001,
  "longitudeDelta": 0.001
};

let coordinate = {"latitude": 47.651857, "longitude": (-122.3552919)};

let iosDirections = "http://maps.apple.com/?daddr=47.651857,-122.3552919";

let androidDirections = "http://maps.google.com/maps?daddr=47.651857,-122.3552919";

/* Methods */
let getDirections _ =>
  if (PlatformRe.os === PlatformRe.IOS) {
    let f () => {
      let _ = Linking.openURL androidDirections;
      ()
    };
    ()
  } else {
    let f () => {
      let _ = Linking.openURL androidDirections;
      ()
    };
    ()
  };

/* Component */
let component = ReasonReact.statelessComponent "Location";

/* Styles */
let styles =
  StyleSheet.create
    Style.(
      {
        "container":
          style [
            flex 1.,
            alignItems `stretch,
            justifyContent `center,
            backgroundColor "rgb(54, 97, 115)",
            paddingTop (
              PlatformRe.os === PlatformRe.IOS ?
                20. : float_of_int StatBar.constants##currentHeight
            )
          ],
        "mapview":
          style [width (float_of_int windowWidth), height (float_of_int windowWidth *. 0.656)],
        "row": style [flex 1., flexDirection `column],
        "text":
          style [
            fontFamily "open-sans",
            fontSize 18.,
            color "white",
            textAlign `center,
            backgroundColor "transparent"
          ],
        "button":
          style [
            backgroundColor "rgb(140, 170, 29)",
            padding 10.,
            margin 10.,
            borderRadius 24.,
            flex 0.
          ]
      }
    );

/* Make */
let make _ _children => {
  ...component,
  render: fun self =>
    <View style=styles##container>
      <View style=styles##row>
        <MapView initialRegion style=styles##mapview>
          <MapView.Marker
            title="Fremont Foundry"
            coordinate
            image=Image.(Required (Packager.require "../../../static/pin.png"))
          />
        </MapView>
        <TouchableOpacity onPress=(fun () => getDirections ())>
          <View style=styles##button> <Text style=styles##text value="GET DIRECTIONS" /> </View>
        </TouchableOpacity>
      </View>
    </View>
};

/* JS Export */
let jsComponent = ReasonReact.wrapReasonForJs ::component (fun _props => make () [||]);