"use strict";

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

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

var _shortid = _interopRequireDefault(require("shortid"));

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

var _Dropdown = _interopRequireDefault(require("../Dropdown/Dropdown"));

var _SandboxMapLegend = _interopRequireDefault(require("./SandboxMapLegend"));

var _Logo = _interopRequireDefault(require("../Logo/Logo"));

var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));

var _SandboxBaseMapSelector = _interopRequireDefault(require("./SandboxBaseMapSelector"));

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

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) } })); }

var menuOpen = (0, _core.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 = (0, _core.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 = (0, _core.css)(_templateObject());
var loading = (0, _core.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 = (0, _core.jsx)("div", {
    css: loadingContainer
  }, (0, _core.jsx)("div", {
    css: loading
  }, (0, _core.jsx)(_Logo["default"], {
    type: "squareLogoAnimated",
    alt: "Loading..."
  })));
  return (0, _core.jsx)("div", {
    css: drawerVisible ? menuOpen : menuClosed
  }, (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
    css: (0, _core.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        ")
  }, (0, _core.jsx)("div", {
    onClick: toggleDrawer,
    onKeyPress: toggleDrawer,
    role: "button",
    tabIndex: 0,
    css: (0, _core.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 && (0, _core.jsx)("div", {
    css: (0, _core.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        ")
  }, (0, _core.jsx)("div", {
    css: (0, _core.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          ")
  }, (0, _core.jsx)("h2", {
    css: (0, _core.css)("\n              margin: 0;\n            ")
  }, "CIVIC Sandbox")), (0, _core.jsx)("div", {
    css: (0, _core.css)("\n            position: relative;\n            z-index: 900;\n          ")
  }, (0, _core.jsx)("h3", {
    css: (0, _core.css)("\n              color: #555;\n              text-transform: uppercase;\n              margin: 0 10px;\n            ")
  }, "Data Collections"), (0, _core.jsx)(_Dropdown["default"], {
    value: selectedPackage,
    options: data.packages.map(function (p) {
      return {
        value: p.displayName,
        label: p.displayName
      };
    }),
    onChange: function onChange(name) {
      updatePackage({
        displayName: name
      });
    },
    simpleValue: true
  })), (0, _core.jsx)("h3", {
    css: (0, _core.css)("\n            color: #555;\n            text-transform: uppercase;\n            margin: 0 10px;\n          ")
  }, "Base Map Style"), onBaseMapStyleChange && baseMapStyle && (0, _core.jsx)(_SandboxBaseMapSelector["default"], {
    onBaseMapStyleChange: onBaseMapStyleChange,
    baseMapStyle: baseMapStyle
  }), (0, _core.jsx)("div", {
    css: (0, _core.css)("\n            position: relative;\n            z-index: 200;\n          ")
  }, (0, _core.jsx)("h3", {
    css: (0, _core.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 && (0, _core.jsx)(_SandboxMapLegend["default"], {
      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 && (0, _core.jsx)(_Dropdown["default"], {
      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 (0, _core.jsx)("div", {
      key: _shortid["default"].generate()
    }, (0, _core.jsx)("div", {
      css: (0, _core.css)("\n                    padding: 0.5rem 0 0 1rem;\n                  ")
    }, (0, _core.jsx)(_Checkbox["default"], {
      name: slide.label,
      value: slide.checked,
      onChange: onChange,
      label: slide.label
    })), mapLegend, (0, _core.jsx)("div", {
      css: (0, _core.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 ? (0, _core.jsx)("div", {
    css: (0, _core.css)("\n                margin: auto;\n                width: 80%;\n              ")
  }, (0, _core.jsx)("p", null, "There was an error fetching the data.")) : null));
};

var _default = SandboxDrawer;
exports["default"] = _default;
SandboxDrawer.propTypes = {
  data: (0, _propTypes.shape)({}),
  onChange: _propTypes.func,
  selectedPackage: _propTypes.string,
  toggleDrawer: _propTypes.func,
  drawerVisible: _propTypes.bool,
  foundationData: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
  allSlides: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
  updatePackage: _propTypes.func,
  foundationMapProps: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
  areSlidesLoading: _propTypes.bool,
  errors: _propTypes.bool,
  updateSlideKey: _propTypes.func,
  baseMapStyle: _propTypes.string,
  onBaseMapStyleChange: _propTypes.func
};