import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from "react";
import ConfigureInterface from "../ConfigureInterface";
import { styled } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import TextField from "@material-ui/core/TextField";
import { setIn } from "seamless-immutable";
import { useTranslation } from "react-i18next";
var Fields = styled("div")({});
var StyledExpansionPanel = styled(ExpansionPanel)({
  marginTop: 16,
  border: "2px solid #000"
});
var StyledButton = styled(Button)({
  width: "100%",
  margin: 16,
  marginLeft: 0
});
export default (function (_ref) {
  var iface = _ref.iface,
      _onChange = _ref.onChange;

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

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fields, null, (iface.fields || []).map(function (f, fieldIndex) {
    return /*#__PURE__*/React.createElement(StyledExpansionPanel, {
      key: fieldIndex
    }, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
      expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, null)
    }, f.fieldName), /*#__PURE__*/React.createElement(ExpansionPanelDetails, null, /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flexDirection: "column"
    }, /*#__PURE__*/React.createElement(TextField, {
      label: "Field Name",
      value: f.fieldName,
      onChange: function onChange(e) {
        _onChange(setIn(["fields", fieldIndex, "fieldName"], e.target.value, iface));
      }
    }), /*#__PURE__*/React.createElement(ConfigureInterface, {
      isNested: true,
      interface: f.interface,
      onChange: function onChange(newFieldInterface) {
        _onChange(_objectSpread(_objectSpread({}, iface), {}, {
          fields: iface.fields.map(function (field) {
            return field.fieldName === f.fieldName ? _objectSpread(_objectSpread({}, f), {}, {
              interface: newFieldInterface
            }) : field;
          })
        }));
      }
    }), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        _onChange(_objectSpread(_objectSpread({}, iface), {}, {
          fields: iface.fields.filter(function (_ref2) {
            var fieldName = _ref2.fieldName;
            return fieldName !== f.fieldName;
          })
        }));
      }
    }, t("remove-field")))));
  }), /*#__PURE__*/React.createElement(StyledButton, {
    onClick: function onClick() {
      _onChange(setIn(iface, ["fields"], (iface.fields || []).concat({
        fieldOrder: (iface.fields || []).length,
        fieldName: "New Field",
        interface: {
          type: "empty"
        }
      })));
    }
  }, t("add-new-field"))));
});