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: 80vh;\n          min-height: 650px;\n          @media (max-width: 850px) {\n            height: 80vh;\n            min-height: 600px;\n          }\n          @media (max-width: 500px) {\n            width: 100%;\n            height: 75vh;\n            min-height: 390px;\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; }

import { useState } from "react";
import { arrayOf, bool, func, number, string, shape, oneOfType } from "prop-types";
import { jsx, css } from "@emotion/core";
import BaseMap from "../BaseMap/BaseMap";
import CivicSandboxMap from "../MultiLayerMap/MultiLayerMap";
import CivicSandboxTooltip from "../CivicSandboxMap/CivicSandboxTooltip";
import SandboxDrawer from "./SandboxDrawer";
var baseMapWrapper = css("\n  height: 80vh;\n  min-height: 650px;\n  @media (max-width: 850px) {\n    height: 80vh;\n    min-height: 600px;\n  }\n  @media (max-width: 500px) {\n    width: 100%;\n    height: 75vh;\n    min-height: 390px;\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 = 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 jsx("div", {
    css: styles
  }, jsx("div", {
    css: css(_templateObject())
  }, jsx(SandboxDrawer, {
    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
  })), jsx("div", {
    css: baseMapWrapper
  }, jsx(BaseMap, {
    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,
    useScrollZoom: true
  }, jsx(CivicSandboxMap, {
    mapLayers: layerData,
    onClick: onFoundationClick,
    onHoverSlide: onSlideHover,
    selectedFoundationDatum: selectedFoundationDatum
  }, tooltipInfo && jsx(CivicSandboxTooltip, {
    tooltipData: tooltipInfo
  })))));
};

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