function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    padding-bottom: 1rem;\n    @media (min-width: 500px) {\n      display: none;\n    }\n  "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    font-size: 0.8rem;\n    margin: -10px 0px 0px 31px;\n    font-style: italic;\n  "]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    font-size: 2rem;\n    margin: auto;\n    text-align: center;\n    font-family: \"Roboto Condensed\", \"Helvetica Neue\", Helvetica, sans-serif;\n  "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    height: 250px;\n    width: 100%;\n    margin: auto;\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) } })); }

import { jsx, css } from "@emotion/core";
import shortid from "shortid";
import { string, bool, func, arrayOf, shape } from "prop-types";
import { Fragment } from "react";
import LayersIcon from "@material-ui/icons/Layers";
import { Dropdown, Logo, Checkbox, ButtonNew } from "..";

var SandboxDrawerLayerSelector = function SandboxDrawerLayerSelector(props) {
  var onChange = props.onChange,
      foundationData = props.foundationData,
      allSlides = props.allSlides,
      areSlidesLoading = props.areSlidesLoading,
      errors = props.errors,
      updateSlideKey = props.updateSlideKey,
      selectedPackage = props.selectedPackage,
      toggleDrawer = props.toggleDrawer;
  var loadingContainer = css(_templateObject());
  var loading = css(_templateObject2());
  var scatterplotHelperText = css(_templateObject3());
  var mobileOnly = css(_templateObject4());
  var loader = jsx("div", {
    css: loadingContainer
  }, jsx("div", {
    css: loading
  }, jsx(Logo, {
    type: "squareLogoAnimated",
    alt: "Loading..."
  })));
  return jsx(Fragment, null, jsx("div", {
    css: css("\n            position: relative;\n            z-index: 900;\n          ")
  }, jsx("div", {
    css: css("margin: 0 10px;")
  }, jsx("h2", null, jsx(LayersIcon, {
    fontSize: "large",
    css: css("\n                vertical-align: middle;\n              ")
  }), "Map Layers"), jsx("h3", null, selectedPackage), jsx("div", {
    css: mobileOnly
  }, jsx(ButtonNew, {
    label: "View Map",
    onClick: toggleDrawer
  })))), jsx("div", {
    css: css("\n            position: relative;\n            z-index: 200;\n          ")
  }, jsx("h3", {
    css: css("\n              color: #555;\n              text-transform: uppercase;\n              margin: 0 10px;\n            ")
  }, "Layers")), !areSlidesLoading && allSlides ? allSlides.map(function (slide, index) {
    var dataIndex = foundationData.findIndex(function (d) {
      var scatterplot = d.mapType === "ScatterPlotMap" && d.layerInfo.displayName === slide.label;
      var choropleth = d.mapType === "ChoroplethMap" && d.layerInfo.displayName === slide.label;
      return choropleth || scatterplot;
    });
    var matchFound = dataIndex > -1 && foundationData[dataIndex].data.length > 0;
    var keyAllOptions = matchFound ? Object.keys(foundationData[dataIndex].data[0].properties).filter(function (c) {
      var fieldName = foundationData[dataIndex].fieldName.color;
      var a = c.match(/^[a-zA-Z]+/);
      var b = fieldName.match(/^[a-zA-Z]+/);
      return a[0] === b[0];
    }) : [];
    var keyOptions = keyAllOptions.length > 3 ? keyAllOptions.slice(0, 4) : keyAllOptions;
    var censusYears = ["1990", "2000", "2010", "2017"];
    var censusChangeYears = ["1990-2017", "2000-2017", "2010-2017"];
    var notYear = keyAllOptions[0] && keyAllOptions[0].search(/[0-9]/) > -1;
    var keySelector = matchFound && notYear && jsx(Dropdown, {
      value: foundationData[dataIndex].fieldName.color,
      options: keyOptions.length === 3 ? keyOptions.map(function (k, i) {
        return {
          value: k,
          label: censusChangeYears[i]
        };
      }) : keyOptions.map(function (k, i) {
        return {
          value: k,
          label: censusYears[i]
        };
      }),
      onChange: function onChange(name) {
        updateSlideKey(_defineProperty({}, slide.label, name));
      },
      simpleValue: true
    });
    return jsx("div", {
      key: shortid.generate()
    }, jsx("div", {
      css: css("\n                    padding: 0.5rem 0 0 1rem;\n                  ")
    }, jsx(Checkbox, {
      name: slide.label,
      value: slide.checked,
      onChange: onChange,
      label: slide.label
    }), slide.mapType === "vtScatterPlotMap" ? jsx("div", {
      css: scatterplotHelperText
    }, "Zoom in to view") : ""), jsx("div", {
      css: css("\n                    padding: 0;\n                    font-size: .75rem;\n                    color: #333;\n                    position: relative;\n                    z-index: ".concat(10 - index, ";\n                  "))
    }, keySelector));
  }) : loader, errors ? jsx("div", {
    css: css("\n                margin: auto;\n                width: 80%;\n              ")
  }, jsx("p", null, "There was an error fetching the data.")) : null);
};

export default SandboxDrawerLayerSelector;
SandboxDrawerLayerSelector.propTypes = {
  onChange: func,
  foundationData: arrayOf(shape({})),
  allSlides: arrayOf(shape({})),
  areSlidesLoading: bool,
  errors: bool,
  updateSlideKey: func,
  selectedPackage: string,
  toggleDrawer: func
};