import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import templates from "../StartingPage/templates";
import SimpleDialog from "../SimpleDialog";
var useStyles = makeStyles({
  bigButton: {
    padding: 10,
    width: 150,
    height: 120,
    border: "1px solid #ccc",
    margin: 10
  },
  bigIcon: {
    width: 48,
    height: 48
  }
});
export default (function (_ref) {
  var open = _ref.open,
      onClose = _ref.onClose,
      onSelect = _ref.onSelect;
  var c = useStyles();
  return /*#__PURE__*/React.createElement(SimpleDialog, {
    title: "Create from Template",
    open: open,
    onClose: onClose
  }, templates.map(function (template) {
    return /*#__PURE__*/React.createElement(Button, {
      key: template.name,
      onClick: function onClick() {
        return onSelect(template);
      },
      className: c.bigButton
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, template.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(template.Icon, {
      className: c.bigIcon
    }))));
  }));
});