import { jsx, css } from "@emotion/core";
import { string, bool, func, arrayOf, shape } from "prop-types";
import MenuIcon from "@material-ui/icons/Menu";
import TimelineIcon from "@material-ui/icons/Timeline";
import LayersIcon from "@material-ui/icons/Layers";
import BookIcon from "@material-ui/icons/Book";
import SandboxDrawerLayerSelector from "./SandboxDrawerLayerSelector";
import SandboxDrawerVisualization from "./SandboxDrawerVisualization";
import SandboxDrawerExplore from "./SandboxDrawerExplore";
import { Logo } from "..";
var menuOpen = css("\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 78vh;\n  min-height: 640px;\n  width: 33%;\n  z-index: 5;\n  transition: 0.5s;\n  @media (max-width: 850px) {\n    width: 95%;\n    height: 78vh;\n    min-height: 590px;\n  }\n  @media (max-width: 500px) {\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 390px;\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  @media (max-width: 500px) {\n    flex-direction: column;\n    width: 100%;\n    height: 40px;\n  }\n");

var SandboxDrawer = function SandboxDrawer(props) {
  var data = props.data,
      onChange = props.onChange,
      selectedPackage = props.selectedPackage,
      selectedPackageDescription = props.selectedPackageDescription,
      toggleDialog = props.toggleDialog,
      toggleContributeDialog = props.toggleContributeDialog,
      toggleDrawer = props.toggleDrawer,
      toggleVisualization = props.toggleVisualization,
      toggleLayerSelector = props.toggleLayerSelector,
      toggleExplore = props.toggleExplore,
      drawerVisible = props.drawerVisible,
      drawerVisualization = props.drawerVisualization,
      drawerLayerSelector = props.drawerLayerSelector,
      drawerExplore = props.drawerExplore,
      foundationData = props.foundationData,
      allSlides = props.allSlides,
      updatePackage = props.updatePackage,
      foundationMapProps = props.foundationMapProps,
      areSlidesLoading = props.areSlidesLoading,
      errors = props.errors,
      updateSlideKey = props.updateSlideKey,
      selectedFoundationDatum = props.selectedFoundationDatum;
  var buttonStyle = css("\n    color: #F3F2F3;\n    height: 40px;\n    opacity: 0.6;\n    display: flex;\n  ");
  var buttonIcon = css("\n    margin: auto;\n  ");
  var on = css("\n    opacity: 1;\n  ");
  var disabled = css("\n    background: #AAA4AB;\n  ");
  var active = css("\n    opacity: 1;\n    @media (min-width: 500px) {\n      border-left: 4px solid #201024;\n    }\n    @media (max-width: 500px) {\n      border-bottom: 4px solid #F3F2F3;\n      box-sizing: border-box;\n    }\n  ");
  var allVectorTileLayers = !areSlidesLoading && allSlides ? foundationData.every(function (slide) {
    return ["vtChoroplethMap", "vtScatterPlotMap"].includes(slide.mapType);
  }) : true;

  var nothing = function nothing() {};

  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: #1E62BD;\n            color: #F3F2F3;\n            min-width: 40px;\n            text-align: center;\n            @media (max-width: 500px) {\n              display: grid;\n              grid-template-columns: repeat(4, auto);\n            }\n          ")
  }, jsx("div", {
    onClick: toggleDrawer,
    onKeyPress: toggleDrawer,
    role: "button",
    tabIndex: 0,
    css: [buttonStyle, on]
  }, jsx(MenuIcon, {
    css: buttonIcon
  })), jsx("div", {
    onClick: allVectorTileLayers ? nothing : toggleVisualization,
    onKeyPress: allVectorTileLayers ? nothing : toggleVisualization,
    role: "button",
    tabIndex: 0,
    css: [buttonStyle, drawerVisible && drawerVisualization && active, allVectorTileLayers && disabled]
  }, jsx(TimelineIcon, {
    css: buttonIcon
  })), jsx("div", {
    onClick: toggleLayerSelector,
    onKeyPress: toggleLayerSelector,
    role: "button",
    tabIndex: 0,
    css: [buttonStyle, drawerVisible && drawerLayerSelector && active]
  }, jsx(LayersIcon, {
    css: buttonIcon
  })), jsx("div", {
    onClick: toggleExplore,
    onKeyPress: toggleExplore,
    role: "button",
    tabIndex: 0,
    css: [buttonStyle, drawerVisible && drawerExplore && active]
  }, jsx(BookIcon, {
    css: buttonIcon
  })))), drawerVisible && jsx("div", {
    css: css("\n          background: rgba(255,255,255,0.9);\n          overflow-y: auto;\n            box-shadow: -10px 5px 15px -3px rgba(0, 0, 0, 0.2);\n            flex-grow: 2;\n        ")
  }, jsx("div", {
    onClick: toggleDialog,
    onKeyPress: toggleDialog,
    role: "button",
    tabIndex: 0,
    css: css("\n              display: flex;\n              background-color: #201024;\n              color: white;\n              height: 50px;\n              text-align: center;\n              cursor: pointer;\n              position: sticky;\n              top: 0;\n              z-index: 999;\n          ")
  }, jsx("div", {
    css: css("margin: auto; padding-top: 5px;")
  }, jsx(Logo, {
    type: "sandboxLogoInverted"
  }))), drawerVisualization && jsx(SandboxDrawerVisualization, {
    selectedPackage: selectedPackage,
    selectedPackageDescription: selectedPackageDescription,
    selectedFoundationDatum: selectedFoundationDatum
  }), drawerLayerSelector && jsx(SandboxDrawerLayerSelector, {
    data: data,
    onChange: onChange,
    selectedPackage: selectedPackage,
    foundationData: foundationData,
    allSlides: allSlides,
    updatePackage: updatePackage,
    foundationMapProps: foundationMapProps,
    areSlidesLoading: areSlidesLoading,
    errors: errors,
    updateSlideKey: updateSlideKey,
    toggleDrawer: toggleDrawer
  }), drawerExplore && jsx(SandboxDrawerExplore, {
    data: data,
    selectedPackage: selectedPackage,
    updatePackage: updatePackage,
    errors: errors,
    toggleLayerSelector: toggleLayerSelector,
    toggleContributeDialog: toggleContributeDialog
  })));
};

export default SandboxDrawer;
SandboxDrawer.propTypes = {
  data: shape({}),
  onChange: func,
  selectedPackage: string,
  selectedPackageDescription: string,
  toggleDialog: func,
  toggleDrawer: func,
  toggleContributeDialog: func,
  toggleVisualization: func,
  toggleLayerSelector: func,
  toggleExplore: func,
  drawerVisible: bool,
  drawerVisualization: bool,
  drawerLayerSelector: bool,
  drawerExplore: bool,
  foundationData: arrayOf(shape({})),
  allSlides: arrayOf(shape({})),
  updatePackage: func,
  foundationMapProps: arrayOf(shape({})),
  areSlidesLoading: bool,
  errors: bool,
  updateSlideKey: func,
  selectedFoundationDatum: shape({})
};