"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _core = require("@emotion/core");

var _propTypes = require("prop-types");

var _CompareSlider = _interopRequireDefault(require("./CompareSlider"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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    font-family: \"Roboto Condensed\", \"Helvetica Neue\", Helvetica, sans-serif;\n    font-size: 18px;\n    font-weight: bold;\n    margin: 0;\n  "]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n    padding: 5px 10px 0 10px;\n    display: flex;\n    justify-content: space-between;\n  "]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    z-index: 1;\n    position: absolute;\n    left: calc(", "% - 1px); // The 1px is to adjust for the border\n    width: 0px;\n    height: ", "px;\n    border: 1px solid white;\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; }

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

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

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

  var LeftMap = _react["default"].cloneElement(leftMap, {
    onSharedViewportChange: setVP,
    sharedViewport: viewport,
    navigation: false,
    mapGLOptions: {
      keyboard: false
    },
    updateViewport: false
  });

  var RightMap = _react["default"].cloneElement(rightMap, {
    onSharedViewportChange: setVP,
    sharedViewport: viewport,
    navigation: false,
    mapGLOptions: {
      keyboard: false
    },
    updateViewport: false
  });

  var container = (0, _core.css)(_templateObject());
  var mapsWrapper = (0, _core.css)(_templateObject2(), height);
  var leftMapWrapper = (0, _core.css)(_templateObject3(), height);
  var rightMapWrapper = (0, _core.css)(_templateObject4(), height, sliderPosition);
  var divider = (0, _core.css)(_templateObject5(), sliderPosition, height);
  var mapTitleWrapper = (0, _core.css)(_templateObject6());
  var titleStyle = (0, _core.css)(_templateObject7());
  var sliderMin = 5;
  var sliderMax = 95;
  var sliderWrapper = (0, _core.css)(_templateObject8(), height / 2, sliderMin, sliderMax - sliderMin);
  return (0, _core.jsx)("div", {
    css: container
  }, (0, _core.jsx)("div", {
    css: mapsWrapper
  }, (0, _core.jsx)("div", {
    css: mapTitleWrapper
  }, leftMapTitle && (0, _core.jsx)("h2", {
    css: titleStyle
  }, leftMapTitle), rightMapTitle && (0, _core.jsx)("h2", {
    css: titleStyle
  }, rightMapTitle)), showDivider && (0, _core.jsx)("div", {
    css: divider
  }), (0, _core.jsx)("div", {
    css: sliderWrapper
  }, (0, _core.jsx)(_CompareSlider["default"], {
    min: sliderMin,
    max: sliderMax,
    value: sliderPosition,
    onChange: function onChange(value) {
      setSliderPosition(value);
    }
  })), (0, _core.jsx)("div", {
    css: leftMapWrapper
  }, LeftMap), (0, _core.jsx)("div", {
    css: rightMapWrapper
  }, RightMap)));
};

ComparisonMap.propTypes = {
  height: _propTypes.number,
  initialViewport: (0, _propTypes.shape)({}),
  leftMap: _propTypes.node.isRequired,
  leftMapTitle: _propTypes.string,
  rightMap: _propTypes.node.isRequired,
  rightMapTitle: _propTypes.string,
  showDivider: _propTypes.bool,
  sliderStartPosition: _propTypes.number
};
ComparisonMap.defaultProps = {
  height: 550,
  leftMapTitle: "",
  rightMapTitle: "",
  showDivider: true,
  sliderStartPosition: 50
};
var _default = ComparisonMap;
exports["default"] = _default;