function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n    z-index: 1;\n    position: absolute;\n    top: ", "px;\n    height: 0;\n    left: ", "%;\n    width: ", "%;\n  "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n    z-index: 1;\n    position: absolute;\n    font-family: \"Roboto Condensed\", \"Helvetica Neue\", Helvetica, sans-serif;\n    font-size: 18px;\n    font-weight: bold;\n    margin: 0;\n\n    // Right Specific Formatting\n    left: calc(", "% + 20px);\n    color: ", ";\n    text-align: left;\n  "]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n    z-index: 1;\n    position: absolute;\n    font-family: \"Roboto Condensed\", \"Helvetica Neue\", Helvetica, sans-serif;\n    font-size: 18px;\n    font-weight: bold;\n    margin: 0;\n\n    // Left Specific Formatting\n    right: calc(100% - ", "% + 20px);\n    color: ", ";\n    text-align: right;\n  "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    z-index: 1;\n    position: absolute;\n    left: calc(", "% - 1.5px); // 1.5px is to adjust for the border\n    width: 0;\n    background: white;\n    height: ", "px;\n    border-left: 3px solid white;\n    box-shadow: -3px 0px 4px gray;\n  "]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    clip-path: inset(0 0 0 ", "%);\n  "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    width: 100%;\n    position: relative;\n    height: ", "px;\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n  "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React from "react";
import { css, jsx } from "@emotion/core";
import { bool, node, number, shape, string } from "prop-types";
import CompareSlider from "./CompareSlider";

var ComparisonMap = function ComparisonMap(props) {
  var height = props.height,
      initialViewport = props.initialViewport,
      leftMap = props.leftMap,
      leftMapTitle = props.leftMapTitle,
      leftTitleColor = props.leftTitleColor,
      rightMap = props.rightMap,
      rightMapTitle = props.rightMapTitle,
      rightTitleColor = props.rightTitleColor,
      showDivider = props.showDivider,
      sliderStartPosition = props.sliderStartPosition;

  var _React$useState = React.useState(sliderStartPosition),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      sliderPosition = _React$useState2[0],
      setSliderPosition = _React$useState2[1];

  var _React$useState3 = React.useState(initialViewport),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      viewport = _React$useState4[0],
      setVP = _React$useState4[1];

  var LeftMap = React.cloneElement(leftMap, {
    onSharedViewportChange: setVP,
    sharedViewport: viewport,
    navigation: false,
    mapGLOptions: {
      keyboard: false
    },
    updateViewport: false
  });
  var RightMap = React.cloneElement(rightMap, {
    onSharedViewportChange: setVP,
    sharedViewport: viewport,
    navigation: false,
    mapGLOptions: {
      keyboard: false
    },
    updateViewport: false
  });
  var container = css(_templateObject());
  var mapsWrapper = css(_templateObject2(), height);
  var leftMapWrapper = css(_templateObject3(), height);
  var rightMapWrapper = css(_templateObject4(), height, sliderPosition);
  var divider = css(_templateObject5(), sliderPosition, height);
  var leftTitleStyle = css(_templateObject6(), sliderPosition, leftTitleColor);
  var rightTitleStyle = css(_templateObject7(), sliderPosition, rightTitleColor);
  var sliderMin = 5;
  var sliderMax = 95;
  var sliderWrapper = css(_templateObject8(), height / 2, sliderMin, sliderMax - sliderMin);
  return jsx("div", {
    css: container
  }, jsx("div", {
    css: mapsWrapper
  }, leftMapTitle && jsx("h2", {
    css: leftTitleStyle
  }, leftMapTitle), rightMapTitle && jsx("h2", {
    css: rightTitleStyle
  }, rightMapTitle), showDivider && jsx("div", {
    css: divider
  }), jsx("div", {
    css: sliderWrapper
  }, jsx(CompareSlider, {
    min: sliderMin,
    max: sliderMax,
    value: sliderPosition,
    onChange: function onChange(value) {
      setSliderPosition(value);
    }
  })), jsx("div", {
    css: leftMapWrapper
  }, LeftMap), jsx("div", {
    css: rightMapWrapper
  }, RightMap)));
};

ComparisonMap.propTypes = {
  height: number,
  initialViewport: shape({}),
  leftMap: node.isRequired,
  leftMapTitle: string,
  leftTitleColor: string,
  rightMap: node.isRequired,
  rightMapTitle: string,
  rightTitleColor: string,
  showDivider: bool,
  sliderStartPosition: number
};
ComparisonMap.defaultProps = {
  height: 550,
  leftMapTitle: "",
  leftTitleColor: "black",
  rightMapTitle: "",
  rightTitleColor: "black",
  showDivider: true,
  sliderStartPosition: 50
};
export default ComparisonMap;