import React from "react";
import templates from "../StartingPage/templates";
import Button from "@material-ui/core/Button";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
var Container = styled("div")({
  padding: 24,
  "&.emptyState": {
    textAlign: "center",
    backgroundColor: colors.blue[800],
    minHeight: "71vh",
    padding: 64,
    "& .bigText": {
      textAlign: "left",
      fontSize: 48,
      color: "#fff",
      fontWeight: "bold",
      marginBottom: 48
    }
  }
});
var BigButton = styled(Button)({
  padding: 10,
  width: 200,
  height: 150,
  boxShadow: "0px 3px 5px rgba(0,0,0,0.3)",
  margin: 12,
  "& .bigIcon": {
    marginTop: 16,
    width: 64,
    height: 64
  },
  transition: "transform 100ms",
  "&:hover": {
    backgroundColor: "#fff",
    transform: "scale(1.04,1.04)"
  },
  backgroundColor: colors.blue[100],
  "&.selected": {
    backgroundColor: "#fff"
  }
});
export var BigInterfaceSelect = function BigInterfaceSelect(_ref) {
  var onChange = _ref.onChange,
      currentInterfaceType = _ref.currentInterfaceType;
  return /*#__PURE__*/React.createElement(Container, {
    className: "emptyState"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bigText"
  }, "Choose an Interface:"), templates.filter(function (t) {
    return t.name !== "Empty";
  }).map(function (template) {
    return /*#__PURE__*/React.createElement(BigButton, {
      key: template.name,
      className: currentInterfaceType === template.dataset.interface.type ? "selected" : "",
      disabled: currentInterfaceType === template.dataset.interface.type,
      onClick: function onClick() {
        return onChange(template.dataset.interface);
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, template.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(template.Icon, {
      className: "bigIcon"
    }))));
  }));
};
export default BigInterfaceSelect;