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 _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 Dropdown from "../Dropdown/Dropdown";
import SandboxMapLegend from "./SandboxMapLegend";
import Logo from "../Logo/Logo";
import Checkbox from "../Checkbox/Checkbox";
import SandboxBaseMapSelector from "./SandboxBaseMapSelector";
var menuOpen = css("\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 75vh;\n  width: 33%;\n  z-index: 5;\n  transition: 0.5s;\n  @media (max-width: 850px) {\n    width: 95%;\n    height: 64vh;\n    min-height: 550px;\n  }\n  @media (max-width: 500px) {\n    width: 100%;\n    height: 64vh;\n    min-height: 550px;\n  }\n");
var menuClosed = css("\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 75vh;\n  width: 40px;\n  z-index: 5;\n  transition: 0.5s;\n\n");
var loadingContainer = css(_templateObject());
var loading = css(_templateObject2());

var SandboxDrawer = function SandboxDrawer(props) {
  var data = props.data,
      onChange = props.onChange,
      selectedPackage = props.selectedPackage,
      toggleDrawer = props.toggleDrawer,
      drawerVisible = props.drawerVisible,
      foundationData = props.foundationData,
      allSlides = props.allSlides,
      updatePackage = props.updatePackage,
      foundationMapProps = props.foundationMapProps,
      areSlidesLoading = props.areSlidesLoading,
      errors = props.errors,
      updateSlideKey = props.updateSlideKey,
      baseMapStyle = props.baseMapStyle,
      onBaseMapStyleChange = props.onBaseMapStyleChange;
  var loader = jsx("div", {
    css: loadingContainer
  }, jsx("div", {
    css: loading
  }, jsx(Logo, {
    type: "squareLogoAnimated",
    alt: "Loading..."
  })));
  return jsx("div", {
    css: drawerVisible ? menuOpen : menuClosed
  }, jsx("div", null, jsx("div", {
    css: css("\n          text-transform: uppercase;\n          font-size: 1rem;\n          cursor: pointer;\n          background: #EE495C;\n          color: #F3F2F3;\n          min-width: 40px;\n          text-align: center;\n        ")
  }, jsx("div", {
    onClick: toggleDrawer,
    onKeyPress: toggleDrawer,
    role: "button",
    tabIndex: 0,
    css: css("\n            font-size: 1.4rem;\n            color: #F3F2F3;\n            line-height: 1.5;\n            height: 35px;\n            padding-left: 5px;\n            @media (max-width: 850px) {\n              font-size: 1.3rem;\n            }\n          ")
  }, drawerVisible ? ">" : "<"))), drawerVisible && jsx("div", {
    css: css("\n          background: rgba(243,242,243,0.9);\n          overflow-y: auto;\n          border: 1px solid #ddd;\n          border-left: 0;\n          border-radius: 2px;\n          box-shadow: -10px 5px 15px -3px rgba(0, 0, 0, 0.2);\n          flex-grow: 2;\n        ")
  }, jsx("div", {
    css: css("\n            margin: 0 0 10px 0;\n            padding: 0;\n            background-color: #201024;\n            color: white;\n            height: 35px;\n            text-align: center;\n          ")
  }, jsx("h2", {
    css: css("\n              margin: 0;\n            ")
  }, "CIVIC Sandbox")), jsx("div", {
    css: css("\n            position: relative;\n            z-index: 900;\n          ")
  }, jsx("h3", {
    css: css("\n              color: #555;\n              text-transform: uppercase;\n              margin: 0 10px;\n            ")
  }, "Data Collections"), jsx(Dropdown, {
    value: selectedPackage,
    options: data.packages.map(function (p) {
      return {
        value: p.displayName,
        label: p.displayName
      };
    }),
    onChange: function onChange(name) {
      updatePackage({
        displayName: name
      });
    },
    simpleValue: true
  })), jsx("h3", {
    css: css("\n            color: #555;\n            text-transform: uppercase;\n            margin: 0 10px;\n          ")
  }, "Base Map Style"), onBaseMapStyleChange && baseMapStyle && jsx(SandboxBaseMapSelector, {
    onBaseMapStyleChange: onBaseMapStyleChange,
    baseMapStyle: baseMapStyle
  }), 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 mapLegend = matchFound && jsx(SandboxMapLegend, {
      data: foundationData[dataIndex].data,
      mapProps: foundationMapProps[dataIndex]
    });
    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 keySelector = matchFound && 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
    })), mapLegend, jsx("div", {
      css: css("\n                    padding: .5rem 0 .5rem 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 SandboxDrawer;
SandboxDrawer.propTypes = {
  data: shape({}),
  onChange: func,
  selectedPackage: string,
  toggleDrawer: func,
  drawerVisible: bool,
  foundationData: arrayOf(shape({})),
  allSlides: arrayOf(shape({})),
  updatePackage: func,
  foundationMapProps: arrayOf(shape({})),
  areSlidesLoading: bool,
  errors: bool,
  updateSlideKey: func,
  baseMapStyle: string,
  onBaseMapStyleChange: func
};