import React from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import BucketIcon from "../ImportPage/S3Icon";
import DirectoryIcon from "@material-ui/icons/FolderOpen";
import FileIcon from "@material-ui/icons/InsertDriveFile";
import BackIcon from "@material-ui/icons/KeyboardArrowUp";
import IconButton from "@material-ui/core/IconButton";
var Container = styled(Box)({});
var Items = styled(Box)({
  height: 300,
  width: 400,
  overflowY: "scroll"
});
var Path = styled(Box)({
  fontWeight: "bold",
  color: colors.grey[600]
});
var Item = styled(Button)({
  width: "100%"
});
export var S3BucketSelector = function S3BucketSelector(_ref) {
  var currentPath = _ref.currentPath,
      options = _ref.options,
      canCreateNew = _ref.canCreateNew,
      onChangePath = _ref.onChangePath,
      _ref$showFiles = _ref.showFiles,
      showFiles = _ref$showFiles === void 0 ? true : _ref$showFiles;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Path, {
    display: "flex",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(IconButton, {
    disabled: !currentPath,
    onClick: function onClick() {
      var newPath = currentPath.split("/").slice(0, -2).join("/") + "/";

      if (newPath === "s3://") {
        onChangePath("");
      } else {
        onChangePath(newPath);
      }
    }
  }, /*#__PURE__*/React.createElement(BackIcon, null)), /*#__PURE__*/React.createElement(Box, null, currentPath)), /*#__PURE__*/React.createElement(Items, null, options.filter(function (option) {
    return option.type === "file" ? showFiles : true;
  }).map(function (option, i) {
    return /*#__PURE__*/React.createElement(Item, {
      key: i,
      onClick: function onClick() {
        if (option.type === "file") {
          onChangePath(currentPath + option.name);
        } else {
          if (!currentPath) {
            onChangePath("s3://".concat(option.name, "/"));
          } else {
            onChangePath("".concat(currentPath).concat(option.name));
          }
        }
      }
    }, option.type === "bucket" ? /*#__PURE__*/React.createElement(BucketIcon, {
      className: "icon"
    }) : option.type === "directory" ? /*#__PURE__*/React.createElement(DirectoryIcon, {
      className: "icon"
    }) : /*#__PURE__*/React.createElement(FileIcon, {
      className: "icon"
    }), /*#__PURE__*/React.createElement(Box, {
      flexGrow: 1,
      className: "text",
      textAlign: "left",
      paddingLeft: 1
    }, option.name));
  }), currentPath !== "" && canCreateNew && /*#__PURE__*/React.createElement(Item, {
    key: "create-new",
    onClick: function onClick() {
      // TODO switch to MUI dialog
      var newDirectory = window.prompt("Enter the name of new directory");

      if (newDirectory) {
        onChangePath(currentPath + newDirectory + "/");
      }
    }
  }, /*#__PURE__*/React.createElement(DirectoryIcon, {
    className: "icon"
  }), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1,
    className: "text",
    textAlign: "left",
    paddingLeft: 1
  }, "Create New"))));
};
export default S3BucketSelector;