"use strict";

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

var _react = require("react");

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

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

var _BaseMap = _interopRequireDefault(require("../BaseMap/BaseMap"));

var _MultiLayerMap = _interopRequireDefault(require("../MultiLayerMap/MultiLayerMap"));

var _CivicSandboxTooltip = _interopRequireDefault(require("../CivicSandboxMap/CivicSandboxTooltip"));

var _SandboxDrawer = _interopRequireDefault(require("./SandboxDrawer"));

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

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 0;\n          margin: 0;\n          width: 100%;\n          height: 75vh;\n          min-height: 600px;\n          @media (max-width: 850px) {\n            height: 60vh;\n            min-height: 500px;\n          }\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 baseMapWrapper = (0, _core.css)("\n  height: 80vh;\n  min-height: 700px;\n  @media (max-width: 850px) {\n    height: 65vh;\n    min-height: 550px;\n  }\n");

var Sandbox = function Sandbox(_ref) {
  var data = _ref.data,
      layerData = _ref.layerData,
      defaultFoundation = _ref.defaultFoundation,
      defaultSlides = _ref.defaultSlides,
      selectedPackage = _ref.selectedPackage,
      selectedFoundation = _ref.selectedFoundation,
      selectedSlide = _ref.selectedSlide,
      slideData = _ref.slideData,
      updatePackage = _ref.updatePackage,
      updateFoundation = _ref.updateFoundation,
      updateSlide = _ref.updateSlide,
      fetchSlideDataByDate = _ref.fetchSlideDataByDate,
      drawerVisible = _ref.drawerVisible,
      toggleDrawer = _ref.toggleDrawer,
      styles = _ref.styles,
      onFoundationClick = _ref.onFoundationClick,
      onSlideHover = _ref.onSlideHover,
      tooltipInfo = _ref.tooltipInfo,
      allSlides = _ref.allSlides,
      selectedFoundationDatum = _ref.selectedFoundationDatum,
      areSlidesLoading = _ref.areSlidesLoading,
      errors = _ref.errors,
      updateSlideKey = _ref.updateSlideKey;

  var _useState = (0, _react.useState)("light"),
      _useState2 = _slicedToArray(_useState, 2),
      baseMapStyle = _useState2[0],
      setBaseMapStyle = _useState2[1];

  var handleBaseMapStyleChange = function handleBaseMapStyleChange(baseMapStyleChangeEvent) {
    baseMapStyleChangeEvent.target.value === "light" ? setBaseMapStyle("light") : setBaseMapStyle("sandbox-dark");
  };

  return (0, _core.jsx)("div", {
    css: styles
  }, (0, _core.jsx)("div", {
    css: (0, _core.css)(_templateObject())
  }, (0, _core.jsx)(_SandboxDrawer["default"], {
    data: data,
    selectedSlide: selectedSlide,
    onChange: updateSlide,
    selectedPackage: selectedPackage,
    toggleDrawer: toggleDrawer,
    drawerVisible: drawerVisible,
    defaultSlides: defaultSlides,
    slideData: slideData,
    fetchSlideByDate: fetchSlideDataByDate,
    selectedFoundation: selectedFoundation,
    foundationData: layerData,
    defaultFoundation: defaultFoundation,
    allSlides: allSlides,
    updatePackage: updatePackage,
    updateFoundation: updateFoundation,
    foundationMapProps: layerData,
    onBaseMapStyleChange: handleBaseMapStyleChange,
    baseMapStyle: baseMapStyle,
    areSlidesLoading: areSlidesLoading,
    errors: errors,
    updateSlideKey: updateSlideKey
  })), (0, _core.jsx)("div", {
    css: baseMapWrapper
  }, (0, _core.jsx)(_BaseMap["default"], {
    civicMapStyle: baseMapStyle,
    initialZoom: 5,
    minZoom: 5,
    maxZoom: 16.5,
    initialLatitude: 38,
    initialLongitude: -97,
    useContainerHeight: true,
    updateViewport: false,
    useFitBounds: true,
    bboxData: layerData.length > 0 ? layerData[0].data : [],
    bboxPadding: 50
  }, (0, _core.jsx)(_MultiLayerMap["default"], {
    mapLayers: layerData,
    onClick: onFoundationClick,
    onHoverSlide: onSlideHover,
    selectedFoundationDatum: selectedFoundationDatum
  }, tooltipInfo && (0, _core.jsx)(_CivicSandboxTooltip["default"], {
    tooltipData: tooltipInfo
  })))));
};

Sandbox.propTypes = {
  data: (0, _propTypes.shape)({
    packages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
    slides: (0, _propTypes.shape)({})
  }).isRequired,
  layerData: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})).isRequired,
  defaultFoundation: (0, _propTypes.shape)({
    endpoint: _propTypes.string,
    name: _propTypes.string,
    visualization: _propTypes.string
  }),
  defaultSlides: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    endpoint: _propTypes.string,
    name: _propTypes.string,
    visualization: _propTypes.string
  })).isRequired,
  selectedPackage: _propTypes.string.isRequired,
  selectedFoundation: _propTypes.string.isRequired,
  selectedSlide: (0, _propTypes.arrayOf)(_propTypes.string).isRequired,
  slideData: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})).isRequired,
  updatePackage: _propTypes.func.isRequired,
  updateFoundation: _propTypes.func.isRequired,
  updateSlide: _propTypes.func.isRequired,
  fetchSlideDataByDate: _propTypes.func.isRequired,
  drawerVisible: _propTypes.bool.isRequired,
  toggleDrawer: _propTypes.func.isRequired,
  styles: _propTypes.string,
  onFoundationClick: _propTypes.func,
  onSlideHover: _propTypes.func,
  tooltipInfo: (0, _propTypes.shape)({
    content: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
    x: _propTypes.number,
    y: _propTypes.number
  }),
  allSlides: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    checked: _propTypes.bool,
    color: (0, _propTypes.arrayOf)(_propTypes.number),
    endpoint: _propTypes.string,
    label: _propTypes.string,
    mapType: _propTypes.string,
    slideId: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
  })).isRequired,
  selectedFoundationDatum: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    data: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)((0, _propTypes.shape)({})), _propTypes.number, _propTypes.string]),
    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
    title: _propTypes.string,
    visualizationType: _propTypes.string
  })),
  areSlidesLoading: _propTypes.bool,
  updateSlideKey: _propTypes.func,
  errors: _propTypes.bool
};
var _default = Sandbox;
exports["default"] = _default;