function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["component", "debug", "initialValue", "view", "variant", "useLabelAsInlineLabel", "useDescriptionAsInlineDescription"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { pick } from 'ramda';
import React from 'react';
import { Box, Button, Form, useFormContext } from '../../index';
var stylesFormDebugger = {
  backgroundColor: '#444',
  color: '#f1f1f1',
  fontSize: '0.8rem'
};
export function FormDebugger() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var fields = useFormContext();
  var record = {};
  if (!Object.keys(props).length) {
    record = fields;
  } else {
    record = pick(Object.keys(props), fields);
  }
  return /*#__PURE__*/React.createElement(Box, {
    flex: "1",
    padding: "md",
    margin: "lg none",
    style: stylesFormDebugger
  }, /*#__PURE__*/React.createElement("pre", {
    style: {
      whiteSpace: 'break-spaces'
    }
  }, JSON.stringify(record, null, 2)));
}
/**
 * Takes a Form Field component, e.g. Form.Select, and creates
 * a full Form of one view and variant. Empty value examples,
 * examples with values, various text or state formats.
 */
var SingleForm = function SingleForm(_ref) {
  var _ref$component = _ref.component,
    FieldComponent = _ref$component === void 0 ? Form.Field : _ref$component,
    debug = _ref.debug,
    initialValue = _ref.initialValue,
    view = _ref.view,
    variant = _ref.variant,
    useLabelAsInlineLabel = _ref.useLabelAsInlineLabel,
    useDescriptionAsInlineDescription = _ref.useDescriptionAsInlineDescription,
    props = _objectWithoutProperties(_ref, _excluded);
  // removes colStart from DOM for traditional variant
  var columnOne = variant === 'traditional' ? {} : {
    colStart: 1
  };
  var columnTwo = variant === 'traditional' ? {} : {
    colStart: 7
  };
  return /*#__PURE__*/React.createElement(Form, {
    enableReinitialize: true,
    initialValues: {
      value: initialValue
    },
    variant: variant,
    view: view,
    onSubmit: function onSubmit(values) {
      return alert(JSON.stringify(values, null, 2));
    }
  }, /*#__PURE__*/React.createElement(Form.Form, null, debug && /*#__PURE__*/React.createElement(FormDebugger, null), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "empty"
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Empty Text'
  } : {
    label: 'Empty Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Empty Description'
  } : {
    description: 'Empty Description'
  }, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "value"
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Initial Value Text'
  } : {
    label: 'Initial Value Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Initial Value Description'
  } : {
    description: 'Initial Value Description'
  }, columnTwo, props))), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "disabled-empty",
    disabled: true
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Disabled Empty Text'
  } : {
    label: 'Disabled Empty Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Disabled Empty Description'
  } : {
    description: 'Disabled Empty Description'
  }, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "disabled-value",
    disabled: true
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Disabled Initial Value Text'
  } : {
    label: 'Disabled Initial Value Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Disabled Initial Description'
  } : {
    description: 'Disabled Initial Description'
  }, columnTwo, props))), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "error-empty",
    error: true
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Error Boolean Empty Text'
  } : {
    label: 'Error Boolean Empty Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Error Boolean Description'
  } : {
    description: 'Error Boolean Description'
  }, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
    name: "error-value",
    error: "Some error message that should be read red"
  }, useLabelAsInlineLabel ? {
    inlineLabel: 'Error Message Initial Value Text'
  } : {
    label: 'Error Message Initial Value Text'
  }, useDescriptionAsInlineDescription ? {
    inlineDescription: 'Error Message Initial Description'
  } : {
    description: 'Error Message Initial Description'
  }, columnTwo, props)))));
};
export var DemoForm = function DemoForm(_ref2) {
  var _ref2$view = _ref2.view,
    view = _ref2$view === void 0 ? 'create' : _ref2$view,
    _ref2$enableConfirmNa = _ref2.enableConfirmNavigation,
    enableConfirmNavigation = _ref2$enableConfirmNa === void 0 ? true : _ref2$enableConfirmNa;
  return /*#__PURE__*/React.createElement(Form, {
    view: view,
    onSubmit: function onSubmit() {
      alert(JSON.stringify(arguments.length <= 0 ? undefined : arguments[0], null, 2));

      // Necessary to return success to notify the client the data
      // is saved on the server and this `form` is pristine once again.
      return Promise.resolve();
    },
    enableConfirmNavigation: enableConfirmNavigation
  }, /*#__PURE__*/React.createElement(Form.Form, null, /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Text, {
    name: "text",
    label: "Text",
    colStart: 1
  }), /*#__PURE__*/React.createElement(Form.Number, {
    name: "number",
    label: "Number",
    required: true,
    tooltip: "An example tooltip for any field, this value goes directly to the Tooltip overlay prop",
    colStart: 7
  })), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Select, {
    name: "select",
    label: "Select",
    options: formSelectOptions,
    colStart: 1
  }), /*#__PURE__*/React.createElement(Form.MultiSelect, {
    name: "multiselect",
    label: "MultiSelect",
    options: formSelectOptions,
    colStart: 7
  })), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Select, {
    name: "select",
    label: "Select with Groups",
    getGroup: function getGroup(option) {
      return option.groupAssociation;
    },
    groupGetId: function groupGetId(group) {
      return group.uuid;
    },
    groupGetLabel: function groupGetLabel(group) {
      return group.displayName;
    },
    options: formSelectOptions,
    optgroups: formSelectGroupOptions
  }), /*#__PURE__*/React.createElement(Form.PillSelect, {
    name: "pillselect",
    label: "Status",
    options: formPillSelectOptions,
    colStart: 7
  })), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.TieredSelect, {
    name: "tieredselect",
    label: "Tiered Select",
    options: formTieredSelectOptions,
    colStart: 1
  }), /*#__PURE__*/React.createElement(Form.GroupSelect, {
    name: "groupselect",
    label: "Group Select for Distribution",
    options: formGroupSelectOptions,
    groups: formGroupSelectGroups,
    colStart: 7
  })), /*#__PURE__*/React.createElement(Box, {
    textAlign: "center",
    marginTop: "sm",
    marginBottom: "xl"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    type: "reset"
  }, "Reset"), ' ', /*#__PURE__*/React.createElement(Button, {
    type: "submit"
  }, "Save"))));
};

/** All variations for a field. views, with values, no values, text variations, etc.
 * @example
 *  <BaseCRU
      component={Form.Number}
      initialValue={100}
    />
 */
export function BaseCRU(props) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Standard"), /*#__PURE__*/React.createElement("h2", null, "Create"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "create"
  }, props)), /*#__PURE__*/React.createElement("h2", null, "Read"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "read"
  }, props)), /*#__PURE__*/React.createElement("h2", null, "Update"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "update"
  }, props)), /*#__PURE__*/React.createElement("h1", null, "Traditional"), /*#__PURE__*/React.createElement("h2", null, "Create"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "create",
    variant: "traditional"
  }, props)), /*#__PURE__*/React.createElement("h2", null, "Read"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "read",
    variant: "traditional"
  }, props)), /*#__PURE__*/React.createElement("h2", null, "Update"), /*#__PURE__*/React.createElement(SingleForm, _extends({
    view: "update",
    variant: "traditional"
  }, props)));
}
export var formGroupSelectOptions = [{
  id: 5139977,
  label: 'Cat'
}, {
  id: 1279548,
  label: 'Cow'
}, {
  id: 1690,
  label: 'Duck'
}, {
  id: 3116635,
  label: 'Crocodile'
}, {
  id: 1037291,
  label: 'Dog'
}, {
  id: 1987946,
  label: 'Elephant'
}, {
  id: 1665038,
  label: 'Fox'
}, {
  id: 10338,
  label: 'Frog'
}, {
  id: 4177019,
  label: 'Giraffe'
}, {
  id: 5136274,
  label: 'Lion'
}, {
  id: 1819065,
  label: 'Owl'
}, {
  id: 3733119,
  label: 'Parrot'
}, {
  id: 2142072,
  label: 'Pig'
}, {
  id: 1360365,
  label: 'Wolf'
}];
export var formGroupSelectGroups = [{
  id: 180604,
  label: 'Group #1',
  options: [5139977, 1037291, 1279548, 5136274]
}, {
  id: 183915,
  label: 'Group #2',
  options: [1037291, 1279548]
}, {
  id: 187138,
  label: 'Group #3',
  options: [1665038, 10338]
}, {
  id: 127496,
  label: 'Group #4',
  options: [3116635, 1819065]
}, {
  id: 126261,
  label: 'Group #5',
  options: [1690]
}].map(function (group) {
  return _objectSpread(_objectSpread({}, group), {}, {
    options: group.options.map(function (groupOpt) {
      return formGroupSelectOptions.find(function (option) {
        return option.id === groupOpt;
      });
    })
  });
});
export var formTieredSelectOptions = [{
  id: 1,
  groupId: null,
  nextGroupId: 10,
  label: 'Apple Farm'
}, {
  id: 3,
  groupId: null,
  nextGroupId: 30,
  label: 'Sports R Us'
}, {
  id: 4,
  groupId: null,
  nextGroupId: 30,
  label: 'Sail It Again Ports'
}, {
  id: 5,
  groupId: null,
  nextGroupId: 30,
  label: 'Dublix'
}, {
  id: 6,
  groupId: null,
  nextGroupId: 30,
  label: 'The Hardees Boys'
}, {
  id: 7,
  groupId: null,
  nextGroupId: 30,
  label: 'Carls Senior'
}, {
  id: 8,
  groupId: null,
  nextGroupId: 30,
  label: 'Tar J'
}, {
  id: 9,
  groupId: null,
  nextGroupId: 30,
  label: 'Innovation Station'
}, {
  id: 10,
  groupId: null,
  nextGroupId: 30,
  label: 'Innovation Nation'
}, {
  id: 11,
  groupId: null,
  nextGroupId: 30,
  label: 'Global Studios'
}, {
  id: 12,
  groupId: null,
  nextGroupId: 30,
  label: "Ralphie's"
}, {
  id: 13,
  groupId: null,
  nextGroupId: 30,
  label: 'Humble State University'
}, {
  id: 14,
  groupId: null,
  nextGroupId: 30,
  label: 'Test Driven Devolvement'
}, {
  id: 15,
  groupId: null,
  nextGroupId: 30,
  label: 'The Drilling Company'
}, {
  id: 16,
  groupId: null,
  nextGroupId: 30,
  label: 'Wrapping text that is very long and will definitely wrap onto two or more lines'
}, {
  id: 17,
  groupId: 10,
  nextGroupId: 100,
  label: 'Granny Smith'
}, {
  id: 18,
  groupId: 10,
  nextGroupId: 101,
  label: 'Gala'
}, {
  id: 21,
  groupId: 30,
  nextGroupId: 300,
  label: 'Project Basketball'
}, {
  id: 22,
  groupId: 30,
  nextGroupId: 301,
  label: 'Table Tennis'
}, {
  id: 23,
  groupId: 30,
  label: 'Table Ten'
}, {
  id: 24,
  groupId: 100,
  label: 'Michigan'
}, {
  id: 25,
  groupId: 101,
  label: 'Washington'
}, {
  id: 26,
  groupId: 200,
  label: 'Georgia'
}, {
  id: 27,
  groupId: 201,
  label: 'California'
}, {
  id: 28,
  groupId: 300,
  label: 'Toronto'
}, {
  id: 29,
  groupId: 301,
  nextGroupId: 302,
  label: 'Court Complex Uno'
}, {
  id: 30,
  groupId: 302,
  nextGroupId: 303,
  label: 'Wrap'
}, {
  id: 31,
  groupId: 303,
  nextGroupId: 304,
  label: 'Wrap'
}, {
  id: 32,
  groupId: 304,
  nextGroupId: 305,
  label: 'Wrap'
}, {
  id: 33,
  groupId: 305,
  nextGroupId: 306,
  label: 'Wrap'
}, {
  id: 34,
  groupId: 306,
  nextGroupId: 307,
  label: 'Wrap'
}, {
  id: 35,
  groupId: 307,
  label: 'Wrap'
}];
export var formSelectOptions = [{
  id: 1,
  label: 'Option Example Uno',
  groupAssociation: 1
}, {
  id: 2,
  label: 'Item Deux 2',
  groupAssociation: 2
}, {
  id: 3,
  label: 'Three Three Three',
  groupAssociation: 1
}, {
  id: 4,
  label: 'Next Item In List Is Design System Design System',
  groupAssociation: 2
}, {
  id: 5,
  label: '5 Entries',
  groupAssociation: 2
}, {
  id: 6,
  label: 'Another Option With A Longer Amount of Important Information To Read',
  groupAssociation: 3
}];
export var formSelectGroupOptions = [{
  uuid: 1,
  displayName: 'Group 1'
}, {
  uuid: 2,
  displayName: 'Group Having a Longer Group Label, Group Two Is That Group'
}, {
  uuid: 3,
  displayName: 'Group 3'
}];
export var formPillSelectOptions = [{
  id: '1',
  label: 'Questionable',
  color: 'yellow'
}, {
  id: '2',
  label: 'False',
  color: 'red'
}, {
  id: '3',
  label: 'The Sky Is Blue',
  color: 'blue'
}, {
  id: '4',
  label: 'Pending Resolution',
  color: 'gray'
}, {
  id: '5',
  label: 'A very long STATUS that has to wrap cause it is so long',
  color: 'green'
}];
export var formInitialValues = {
  text: 'Hello String',
  number: 123456.789,
  checkbox: true,
  checkboxes: [formSelectOptions[1], formSelectOptions[2]],
  currency: 1200300.55,
  date: new Date(2020, 9, 31, 14, 30, 42),
  // Halloween, a Saturday at 2:30 PM
  textarea: 'Hello\nWorld  !!\n\n    Hello    World',
  select: formSelectOptions[1],
  multiselect: [formSelectOptions[1], formSelectOptions[3], formSelectOptions[0]],
  pillselect: formPillSelectOptions[0],
  groupselect: [formGroupSelectOptions[0], formGroupSelectOptions[2]],
  tieredselect: [{
    id: 4,
    groupId: null,
    nextGroupId: 30,
    label: 'Sail It Again Ports'
  }, {
    id: 22,
    groupId: 30,
    nextGroupId: 301,
    label: 'Table Tennis'
  }, {
    id: 29,
    groupId: 301,
    nextGroupId: 302,
    label: 'Court Complex Uno'
  }],
  radiobuttons: formSelectOptions[5],
  richtext: '<p><span style="font-size: 18pt; background-color: #00ff00;">Rich Text Is <strong>Bold</strong></span></p> '
};
//# sourceMappingURL=util.js.map