import React from "react";
import { css } from "emotion";
import { getPlugins } from "../../../plugins";
import { Dialog, DialogTitle, DialogContent, DialogActions, DialogButton, DialogCancel } from "@webiny/ui/Dialog";
import { validation } from "@webiny/validation";
import { Input } from "@webiny/ui/Input";
import { Select } from "@webiny/ui/Select";
import { CircularProgress } from "@webiny/ui/Progress";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Form } from "@webiny/form";
import styled from "styled-components";
var narrowDialog = /*#__PURE__*/css({
  ".mdc-dialog__surface": {
    width: 600,
    minWidth: 600
  }
}, "label:narrowDialog;");
var PreviewBox = /*#__PURE__*/styled("div", {
  target: "evv3w5a0",
  label: "PreviewBox"
})({
  width: 500,
  minHeight: 250,
  border: "1px solid var(--mdc-theme-on-background)",
  backgroundColor: "#fff",
  // this must always be white
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  img: {
    maxHeight: 500,
    maxWidth: 500
  }
});

var EditBlockDialog = function EditBlockDialog(props) {
  var open = props.open,
      onClose = props.onClose,
      onSubmit = props.onSubmit,
      plugin = props.plugin,
      loading = props.loading;
  var plugins = getPlugins("pb-editor-block-category");
  var blockCategoriesOptions = plugins.map(function (item) {
    return {
      value: item.name,
      label: item.title
    };
  });
  return /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: onClose,
    className: narrowDialog
  }, loading && /*#__PURE__*/React.createElement(CircularProgress, {
    label: "Saving block..."
  }), plugin && /*#__PURE__*/React.createElement(Form, {
    onSubmit: onSubmit,
    data: plugin
  }, function (_ref) {
    var data = _ref.data,
        submit = _ref.submit,
        Bind = _ref.Bind;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogTitle, null, "Update ", plugin.title), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
      span: 12
    }, /*#__PURE__*/React.createElement(Bind, {
      name: "title",
      validators: validation.create("required")
    }, /*#__PURE__*/React.createElement(Input, {
      label: "Name",
      autoFocus: true
    })))), data.type === "block" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
      span: 12
    }, /*#__PURE__*/React.createElement(Bind, {
      name: "category",
      validators: validation.create("required")
    }, /*#__PURE__*/React.createElement(Select, {
      label: "Category",
      description: "Select a block category",
      options: blockCategoriesOptions
    }))))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
      span: 12
    }, /*#__PURE__*/React.createElement(PreviewBox, null, plugin.preview())))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, null, "Cancel"), /*#__PURE__*/React.createElement(DialogButton, {
      onClick: submit
    }, "Save")));
  }));
};

export default /*#__PURE__*/React.memo(EditBlockDialog, function (props, nextProps) {
  return props.open === nextProps.open && props.loading === nextProps.loading;
});
//# sourceMappingURL=EditBlockDialog.js.map