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: 100vh;\n          min-height: 650px;\n          @media (max-width: 850px) {\n            height: 100vh;\n            min-height: 600px;\n          }\n          @media (max-width: 500px) {\n            width: 100%;\n            height: 100vh;\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, node } 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";
import SandboxIntroDialog from "./SandboxIntroDialog";
import SandboxLegend from "./SandboxLegend";
import "./sandboxGeocoder.css";
var baseMapWrapper = css("\n  height: 100vh;\n  min-height: 650px;\n  @media (max-width: 850px) {\n    height: 100vh;\n    min-height: 600px;\n  }\n  @media (max-width: 500px) {\n    padding-top: 40px;\n    width: 100%;\n    height: calc(100vh - 40px);\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,
      selectedPackageDescription = _ref.selectedPackageDescription,
      selectedFoundation = _ref.selectedFoundation,
      selectedSlide = _ref.selectedSlide,
      slideData = _ref.slideData,
      updatePackage = _ref.updatePackage,
      updateFoundation = _ref.updateFoundation,
      updateSlide = _ref.updateSlide,
      fetchSlideDataByDate = _ref.fetchSlideDataByDate,
      drawerVisible = _ref.drawerVisible,
      drawerVisualization = _ref.drawerVisualization,
      drawerLayerSelector = _ref.drawerLayerSelector,
      drawerExplore = _ref.drawerExplore,
      toggleDrawer = _ref.toggleDrawer,
      toggleDrawerLayerSelector = _ref.toggleDrawerLayerSelector,
      toggleDrawerVisualization = _ref.toggleDrawerVisualization,
      toggleDrawerExplore = _ref.toggleDrawerExplore,
      dialogVisible = _ref.dialogVisible,
      toggleDialog = _ref.toggleDialog,
      contributeDialogVisible = _ref.contributeDialogVisible,
      toggleContributeDialog = _ref.toggleContributeDialog,
      ContributeDialogComponent = _ref.ContributeDialogComponent,
      styles = _ref.styles,
      onFoundationClick = _ref.onFoundationClick,
      onSlideHover = _ref.onSlideHover,
      onBaseMapHover = _ref.onBaseMapHover,
      tooltipInfo = _ref.tooltipInfo,
      tooltipInfoVector = _ref.tooltipInfoVector,
      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");
  };

  var featuresArr = layerData.length ? layerData[0].data : [];
  var boundBox = layerData.length ? layerData[0].boundBox : [];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      highlightFeatureStateID = _useState4[0],
      setHighlightFeatureStateID = _useState4[1];

  var _useState5 = useState(null),
      _useState6 = _slicedToArray(_useState5, 2),
      vectorSource = _useState6[0],
      setVectorSource = _useState6[1];

  var _useState7 = useState(null),
      _useState8 = _slicedToArray(_useState7, 2),
      vectorSourceLayer = _useState8[0],
      setVectorSourceLayer = _useState8[1];

  var onHoverVectorLayer = function onHoverVectorLayer(info, mapboxRef) {
    var _info$features = _slicedToArray(info.features, 1),
        selectedFeature = _info$features[0];

    if (!selectedFeature) return;
    var selectedIndex = selectedFeature.layer && selectedFeature.layer.metadata && selectedFeature.layer.metadata["sandbox:index"];
    var hoverVectorSource = selectedFeature.source;
    var hoverVectorSourceLayer = selectedFeature.sourceLayer;
    var hasSource = mapboxRef.getSource(vectorSource);

    if (highlightFeatureStateID && hasSource) {
      mapboxRef.setFeatureState({
        source: vectorSource,
        sourceLayer: vectorSourceLayer,
        id: highlightFeatureStateID
      }, {
        highlight: false
      });
    }

    if (selectedIndex >= 0) {
      setVectorSource(hoverVectorSource);
      setVectorSourceLayer(hoverVectorSourceLayer);
      setHighlightFeatureStateID(selectedFeature.id);
      mapboxRef.setFeatureState({
        source: hoverVectorSource,
        sourceLayer: hoverVectorSourceLayer,
        id: selectedFeature.id
      }, {
        highlight: true
      });
    }

    var selectedProps = selectedFeature.properties;

    if (selectedProps && selectedIndex !== undefined) {
      var selectedDatum = {
        object: {
          properties: selectedProps
        },
        x: info.point[0],
        y: info.point[1]
      };
      onBaseMapHover(selectedDatum, selectedIndex);
    } else {
      var _selectedDatum = {};
      onBaseMapHover(_selectedDatum, selectedIndex);
    }
  };

  var mouseOutVectorLayer = function mouseOutVectorLayer(mapboxRef) {
    var hasSource = mapboxRef.getSource(vectorSource);

    if (hasSource) {
      mapboxRef.removeFeatureState({
        source: vectorSource,
        sourceLayer: vectorSourceLayer
      });
    }

    var selectedDatum = {
      object: {}
    };
    onBaseMapHover(selectedDatum);
  };

  return jsx("div", {
    css: styles
  }, jsx("div", {
    css: css(_templateObject())
  }, jsx(SandboxIntroDialog, {
    open: dialogVisible,
    onClose: toggleDialog
  }), jsx(ContributeDialogComponent, {
    open: contributeDialogVisible,
    onClose: toggleContributeDialog
  }), jsx(SandboxDrawer, {
    data: data,
    selectedSlide: selectedSlide,
    onChange: updateSlide,
    selectedPackage: selectedPackage,
    selectedPackageDescription: selectedPackageDescription,
    toggleDialog: toggleDialog,
    toggleContributeDialog: toggleContributeDialog,
    toggleDrawer: toggleDrawer,
    toggleLayerSelector: toggleDrawerLayerSelector,
    toggleVisualization: toggleDrawerVisualization,
    toggleExplore: toggleDrawerExplore,
    drawerVisible: drawerVisible,
    dialogVisible: dialogVisible,
    drawerVisualization: drawerVisualization,
    drawerLayerSelector: drawerLayerSelector,
    drawerExplore: drawerExplore,
    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,
    selectedFoundationDatum: selectedFoundationDatum
  })), jsx("div", {
    css: baseMapWrapper
  }, jsx(BaseMap, {
    civicMapStyle: baseMapStyle,
    initialLatitude: 39.810492,
    initialLongitude: -98.556061,
    initialZoom: 3.5,
    minZoom: 3,
    maxZoom: 14,
    useContainerHeight: true,
    updateViewport: false,
    boundBox: boundBox,
    bboxData: featuresArr,
    bboxPadding: 50,
    useScrollZoom: true,
    onBaseMapHover: onHoverVectorLayer,
    onBaseMapMouseOut: mouseOutVectorLayer,
    geocoder: true,
    geocoderOptions: {
      zoom: 13
    },
    geocoderPosition: "top-left"
  }, jsx(CivicSandboxMap, {
    mapLayers: layerData,
    onLayerClick: onFoundationClick,
    onHoverSlide: onSlideHover,
    selectedFoundationDatum: selectedFoundationDatum
  }, tooltipInfo && jsx(CivicSandboxTooltip, {
    tooltipData: tooltipInfo
  }), tooltipInfoVector && jsx(CivicSandboxTooltip, {
    tooltipData: tooltipInfoVector
  }))), jsx(SandboxLegend, {
    foundationData: layerData,
    allSlides: allSlides,
    foundationMapProps: layerData,
    areSlidesLoading: areSlidesLoading,
    errors: errors
  })));
};

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,
  selectedPackageDescription: 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,
  drawerVisualization: bool.isRequired,
  drawerExplore: bool.isRequired,
  drawerLayerSelector: bool.isRequired,
  toggleDrawer: func.isRequired,
  toggleDrawerLayerSelector: func.isRequired,
  toggleDrawerVisualization: func.isRequired,
  toggleDrawerExplore: func.isRequired,
  dialogVisible: bool.isRequired,
  toggleDialog: func.isRequired,
  contributeDialogVisible: bool.isRequired,
  toggleContributeDialog: func.isRequired,
  ContributeDialogComponent: node.isRequired,
  styles: string,
  onFoundationClick: func,
  onSlideHover: func,
  onBaseMapHover: func,
  tooltipInfo: shape({
    content: arrayOf(shape({})),
    x: number,
    y: number
  }),
  tooltipInfoVector: 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: shape({
    id: number,
    displayName: string,
    featureProperties: shape({}),
    colorKey: string,
    primaryFormat: string
  }),
  areSlidesLoading: bool,
  updateSlideKey: func,
  errors: bool
};
export default Sandbox;