"use strict";

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

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

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

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

var _SandboxDateSelector = _interopRequireDefault(require("./SandboxDateSelector"));

var _SandboxToggleSwitch = _interopRequireDefault(require("./SandboxToggleSwitch"));

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

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

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

var menuOpen = (0, _core.css)("\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 35%;\n  z-index: 5;\n  transition: 0.5s;\n  @media (max-width: 850px) {\n    width: 90%;\n  }\n  @media (max-width: 500px) {\n    width: 100%;\n  }\n");
var menuClosed = (0, _core.css)("\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 7%;\n  z-index: 5;\n  transition: 0.5s;\n  @media (max-width: 850px) {\n    width: 15%;\n  }\n  @media (max-width: 500px) {\n    width: 25%;\n  }\n");

var SandboxDrawer = function SandboxDrawer(_ref) {
  var data = _ref.data,
      onChange = _ref.onChange,
      selectedPackage = _ref.selectedPackage,
      toggleDrawer = _ref.toggleDrawer,
      drawerVisible = _ref.drawerVisible,
      slideData = _ref.slideData,
      fetchSlideByDate = _ref.fetchSlideByDate,
      foundationData = _ref.foundationData,
      defaultFoundation = _ref.defaultFoundation,
      allSlides = _ref.allSlides,
      updatePackage = _ref.updatePackage,
      selectedFoundation = _ref.selectedFoundation,
      updateFoundation = _ref.updateFoundation,
      foundationMapProps = _ref.foundationMapProps,
      onBaseMapStyleChange = _ref.onBaseMapStyleChange,
      baseMapStyle = _ref.baseMapStyle;
  return (0, _core.jsx)("div", {
    css: drawerVisible ? menuOpen : menuClosed
  }, (0, _core.jsx)("div", {
    onClick: toggleDrawer
  }, (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        ")
  }, (0, _core.jsx)("div", {
    css: (0, _core.css)("\n            font-size: 1.4rem;\n            color: #F3F2F3;\n            line-height: 1.5;\n            padding-left: 5px;\n            @media (max-width: 850px) {\n              font-size: 1.3rem;\n            }\n          ")
  }, drawerVisible ? "Close Menu" : "Open Menu"))), drawerVisible && (0, _core.jsx)("div", {
    css: (0, _core.css)("\n          background: rgba(243,242,243,0.9);\n          overflow-y: auto;\n          min-height: 550px;\n          height: 74vh;\n          border: 1px solid #ddd;\n          border-radius: 2px;\n          box-shadow: -10px 5px 15px -3px rgba(0, 0, 0, 0.2);\n          @media (max-width: 850px) {\n            height: 60vh;\n          }\n        ")
  }, (0, _core.jsx)("div", {
    css: (0, _core.css)("\n            position: relative;\n            z-index: 900;\n          ")
  }, (0, _core.jsx)("h2", {
    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: Object.keys(data.packages).map(function (p) {
      return {
        value: p,
        label: p
      };
    }),
    onChange: updatePackage,
    simpleValue: true
  })), (0, _core.jsx)("div", {
    css: (0, _core.css)("\n            position: relative;\n            z-index: 400;\n          ")
  }, (0, _core.jsx)("h2", {
    css: (0, _core.css)("\n              color: #555;\n              text-transform: uppercase;\n              margin: 0 10px;\n            ")
  }, "Base Layers"), (0, _core.jsx)(_Dropdown["default"], {
    value: selectedFoundation,
    options: data.packages[selectedPackage].foundations.map(function (foundation) {
      return {
        value: foundation,
        label: data.foundations[foundation].name
      };
    }),
    onChange: updateFoundation,
    simpleValue: true
  })), foundationData && (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
    css: (0, _core.css)("\n                position: relative;\n                font-size: .75rem;\n                color: #333;\n                z-index: 300;\n              ")
  }, foundationData.slide_meta && foundationData.slide_meta.dates.date_granularity ? (0, _core.jsx)(_SandboxDateSelector["default"], {
    slide: defaultFoundation,
    selectedSlideData: foundationData,
    fetchSlideByDate: fetchSlideByDate,
    type: "foundation"
  }) : foundationData.slide_meta && foundationData.slide_meta.dates.default_date_filter ? (0, _core.jsx)("span", {
    css: (0, _core.css)("\n                      font-size: 22px;\n                      font-weight: 400;\n                      padding: 0 0 0 16px;\n                      margin: 0;\n                    ")
  }, foundationData.slide_meta.dates.default_date_filter) : null), foundationData.slide_data && foundationMapProps.scaleType && (0, _core.jsx)(_SandboxMapLegend["default"], {
    data: foundationData,
    mapProps: foundationMapProps
  }), (0, _core.jsx)("h2", {
    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)("h2", {
    css: (0, _core.css)("\n              color: #555;\n              text-transform: uppercase;\n              margin: 0 10px;\n            ")
  }, "Slide Layers")), allSlides.map(function (slide, index) {
    var selectedSlideData = !!slideData.find(function (slideDatum) {
      return slideDatum[slide.label];
    }) ? slideData.find(function (slideDatum) {
      return slideDatum[slide.label];
    })[slide.label] : {};
    var defaultGray = [238, 238, 238, 255];
    var backgroundSlideColor = slide.color;

    var formatBackgroundColor = function formatBackgroundColor(arr) {
      return arr.reduce(function (acc, cur, i) {
        return i < 3 ? "".concat(acc + cur, ",") : "".concat(acc, "0.9)");
      }, "rgba(");
    };

    var slideBackGroundColor = formatBackgroundColor(backgroundSlideColor);
    var blackTextColor = "rgba(0,0,0,1)";
    var whiteTextColor = "rgba(255,255,255,1)";
    var textColor = slideBackGroundColor === defaultGray ? blackTextColor : whiteTextColor;
    return (0, _core.jsx)("div", {
      key: _shortid["default"].generate()
    }, (0, _core.jsx)("div", {
      css: (0, _core.css)("\n                  border-top: 1px solid #ddd;\n                  padding: .3rem .5rem;\n                  text-transform: capitalize;\n                  font-weight: bold;\n                  background: ".concat(slideBackGroundColor, ";\n                  color:").concat(textColor, "\n                "))
    }, (0, _core.jsx)(_SandboxToggleSwitch["default"], {
      name: slide.slideId,
      checked: slide.checked,
      onChange: onChange,
      label: slide.label,
      mapType: slide.mapType
    })), (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                "))
    }, slide.checked && selectedSlideData.slide_meta && selectedSlideData.slide_meta.dates.date_granularity ? (0, _core.jsx)(_SandboxDateSelector["default"], {
      selectedSlideData: selectedSlideData,
      slide: slide,
      fetchSlideByDate: fetchSlideByDate,
      type: "slide"
    }) : slide.checked && selectedSlideData.slide_meta && selectedSlideData.slide_meta.dates.default_date_filter ? (0, _core.jsx)("span", {
      css: (0, _core.css)("\n                          font-size: 18px;\n                          padding: 0 0 0 17px;\n                          margin: 0;\n                        ")
    }, selectedSlideData.slide_meta.dates.default_date_filter) : null));
  })));
};

var _default = SandboxDrawer;
exports["default"] = _default;