import { jsx, css } from "@emotion/core";
import { string, bool, func, shape } from "prop-types";
import { Fragment } from "react";
import BookIcon from "@material-ui/icons/Book";
import { PackageSelectorBox, ButtonNew, Placeholder } from "..";

var SandboxDrawerExplore = function SandboxDrawerExplore(props) {
  var data = props.data,
      selectedPackage = props.selectedPackage,
      toggleLayerSelector = props.toggleLayerSelector,
      updatePackage = props.updatePackage,
      errors = props.errors,
      toggleContributeDialog = props.toggleContributeDialog;
  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(BookIcon, {
    fontSize: "large",
    css: css("\n                vertical-align: middle;\n                padding-right: 2px;\n              ")
  }), "Collections"), jsx(Placeholder, null, jsx(ButtonNew, {
    label: "Learn How To Add Your Data",
    onClick: toggleContributeDialog
  }))), jsx(PackageSelectorBox, {
    selectedPackages: selectedPackage,
    packages: data && data.packages.length ? data.packages : [],
    onChange: function onChange(name) {
      updatePackage({
        displayName: name
      });
      toggleLayerSelector();
    }
  })), 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 SandboxDrawerExplore;
SandboxDrawerExplore.propTypes = {
  data: shape({}),
  selectedPackage: string,
  updatePackage: func,
  toggleLayerSelector: func,
  toggleContributeDialog: bool,
  errors: bool
};