import React, { useCallback } from "react";
import Drawer from "@material-ui/core/Drawer";
import { useDropzone } from "react-dropzone";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListSubheader from "@material-ui/core/ListSubheader";
import { GoMarkGithub } from "react-icons/go";
import { makeStyles } from "@material-ui/core/styles";
import HomeIcon from "@material-ui/icons/Home";
import { FaTrashAlt } from "react-icons/fa";
import templates from "../StartingPage/templates";
import * as colors from "@material-ui/core/colors";
import FileIcon from "@material-ui/icons/InsertDriveFile";
import NoteAddIcon from "@material-ui/icons/NoteAdd";
import SettingsInputHdmiIcon from "@material-ui/icons/SettingsInputHdmi";
import { useTranslation } from "react-i18next";
var useStyles = makeStyles({});
export default (function (_ref) {
  var recentItems = _ref.recentItems,
      changeRecentItems = _ref.changeRecentItems,
      onClickHome = _ref.onClickHome,
      onCloseDrawer = _ref.onCloseDrawer,
      onClickManagePlugins = _ref.onClickManagePlugins,
      drawerOpen = _ref.drawerOpen,
      onOpenFile = _ref.onOpenFile,
      onOpenRecentItem = _ref.onOpenRecentItem,
      onClickTemplate = _ref.onClickTemplate;
  var c = useStyles();

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  var onDrop = useCallback(function (acceptedFiles) {
    onOpenFile(acceptedFiles[0]);
  }, [onOpenFile]);

  function onDeleteFile(i) {
    changeRecentItems(recentItems.filter(function (oneRecentFile) {
      return oneRecentFile.id !== i;
    }));
  }

  var _useDropzone = useDropzone({
    onDrop: onDrop
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps;

  return /*#__PURE__*/React.createElement(Drawer, {
    open: drawerOpen,
    onClose: onCloseDrawer
  }, /*#__PURE__*/React.createElement(List, {
    className: c.list
  }, /*#__PURE__*/React.createElement(ListItem, {
    onClick: onClickHome,
    button: true
  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(HomeIcon, null)), /*#__PURE__*/React.createElement(ListItemText, null, "Home")), /*#__PURE__*/React.createElement(ListItem, Object.assign({}, getRootProps(), {
    button: true
  }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(NoteAddIcon, null)), /*#__PURE__*/React.createElement(ListItemText, null, "Open File"), /*#__PURE__*/React.createElement("input", getInputProps())), onClickManagePlugins && /*#__PURE__*/React.createElement(ListItem, {
    onClick: function onClick() {
      onClickManagePlugins();
      onCloseDrawer();
    },
    button: true
  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(SettingsInputHdmiIcon, null)), /*#__PURE__*/React.createElement(ListItemText, null, "Manage Plugins")), /*#__PURE__*/React.createElement(ListSubheader, null, "Recent Files"), recentItems.length === 0 ? /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, {
    style: {
      textAlign: "center",
      color: colors.grey[500]
    }
  }, t("no-recent-items"))) : recentItems.map(function (ri, index) {
    return /*#__PURE__*/React.createElement(ListItem, {
      key: ri.fileName,
      button: true
    }, /*#__PURE__*/React.createElement(ListItemIcon, {
      onClick: function onClick() {
        onOpenRecentItem(ri);
      }
    }, /*#__PURE__*/React.createElement(FileIcon, null)), /*#__PURE__*/React.createElement(ListItemText, {
      onClick: function onClick() {
        onOpenRecentItem(ri);
      }
    }, ri.fileName), /*#__PURE__*/React.createElement(ListItemIcon, {
      onClick: function onClick() {
        onDeleteFile(ri.id);
      }
    }, /*#__PURE__*/React.createElement(FaTrashAlt, null)));
  }), /*#__PURE__*/React.createElement(ListSubheader, null, "Create From Template"), templates.map(function (template) {
    return /*#__PURE__*/React.createElement(ListItem, {
      button: true,
      key: template.name,
      onClick: function onClick() {
        return onClickTemplate(template);
      }
    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(template.Icon, null)), /*#__PURE__*/React.createElement(ListItemText, null, template.name));
  }), /*#__PURE__*/React.createElement(ListSubheader, null, t("explore-more")), /*#__PURE__*/React.createElement(ListItem, {
    button: true,
    onClick: function onClick() {
      window.location.href = "https://github.com/OpenHumanAnnotation/universal-data-tool/releases";
    }
  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GoMarkGithub, null)), /*#__PURE__*/React.createElement(ListItemText, null, "Github"))));
});