import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import _pt from 'prop-types';
import '../../form-skeletons/utils/index.esm.js';
import { useAriaFormField } from '../../form-skeletons/hooks/useAriaFormField.esm.js';
import { useAriaFormGroupField } from '../../form-skeletons/hooks/useAriaFormGroupField.esm.js';
import { StyledLabel, FormHint, FormError, FormFieldset, FormLegend } from './styled-primitives/StyledFormElements.esm.js';
import { getFieldLayoutStyles } from '../styles/index.esm.js';

function FormFieldBlock(_ref) {
  var id = _ref.id,
      label = _ref.label,
      error = _ref.error,
      hint = _ref.hint,
      required = _ref.required,
      labelSize = _ref.labelSize,
      validationMode = _ref.validationMode,
      layout = _ref.layout,
      className = _ref.className,
      children = _ref.children;
  var fieldData = useAriaFormField(id, {
    required: required,
    hasError: !!error,
    hasHint: !!hint,
    validationMode: validationMode
  });
  return jsx(FormFieldBlockBoilerplate, {
    fieldData: fieldData,
    label: label,
    error: error,
    hint: hint,
    layout: layout,
    labelSize: labelSize,
    className: className
  }, typeof children === "function" ? children(fieldData.controlProps) : children);
}
FormFieldBlock.propTypes = {
  id: _pt.string.isRequired,
  label: _pt.node.isRequired,
  error: _pt.node,
  hint: _pt.node,
  required: _pt.bool,
  className: _pt.string,
  children: _pt.oneOfType([_pt.node, _pt.func]).isRequired
};
function FormFieldBlockBoilerplate(_ref2) {
  var fieldData = _ref2.fieldData,
      children = _ref2.children,
      label = _ref2.label,
      error = _ref2.error,
      hint = _ref2.hint,
      layout = _ref2.layout,
      labelSize = _ref2.labelSize,
      rest = _objectWithoutProperties(_ref2, ["fieldData", "children", "label", "error", "hint", "layout", "labelSize"]);

  var _getFieldLayoutStyles = getFieldLayoutStyles(layout),
      labelCss = _getFieldLayoutStyles.labelCss,
      fieldBodyCss = _getFieldLayoutStyles.fieldBodyCss;

  var finalLabelCss = function finalLabelCss(theme) {
    return [labelCss(theme), {
      display: "block"
    }];
  };

  return jsx("div", rest, jsx(StyledLabel, _extends({
    required: fieldData.controlProps.required,
    labelSize: labelSize
  }, fieldData.labelProps, {
    css: finalLabelCss
  }), label), jsx("div", {
    css: fieldBodyCss
  }, children, jsx(FormHint, fieldData.hintProps, hint), jsx(FormError, fieldData.errorProps, error)));
}
/**
 * Group field organism
 *
 */

function FormGroupFieldBlock(_ref3) {
  var id = _ref3.id,
      label = _ref3.label,
      error = _ref3.error,
      hint = _ref3.hint,
      required = _ref3.required,
      labelSize = _ref3.labelSize,
      validationMode = _ref3.validationMode,
      layout = _ref3.layout,
      className = _ref3.className,
      children = _ref3.children;
  var fieldData = useAriaFormGroupField(id, {
    required: required,
    error: error,
    hint: hint,
    validationMode: validationMode
  });
  return jsx(FormGroupFieldBlockBoilerplate, {
    fieldData: fieldData,
    label: label,
    error: error,
    hint: hint,
    layout: layout,
    labelSize: labelSize,
    className: className
  }, children({
    getOptionControlProps: fieldData.getOptionControlProps,
    getOptionLabelProps: fieldData.getOptionLabelProps
  }));
}
FormGroupFieldBlock.propTypes = {
  id: _pt.string.isRequired,
  label: _pt.node.isRequired,
  error: _pt.node,
  hint: _pt.node,
  required: _pt.bool,
  className: _pt.string,
  children: _pt.func.isRequired
};
function FormGroupFieldBlockBoilerplate(_ref4) {
  var fieldData = _ref4.fieldData,
      children = _ref4.children,
      label = _ref4.label,
      error = _ref4.error,
      hint = _ref4.hint,
      layout = _ref4.layout,
      labelSize = _ref4.labelSize,
      rest = _objectWithoutProperties(_ref4, ["fieldData", "children", "label", "error", "hint", "layout", "labelSize"]);

  var _getFieldLayoutStyles2 = getFieldLayoutStyles(layout, true),
      labelCss = _getFieldLayoutStyles2.labelCss,
      fieldBodyCss = _getFieldLayoutStyles2.fieldBodyCss;

  var finalLabelCss = function finalLabelCss(theme) {
    return [labelCss(theme), {
      display: "block"
    }];
  };

  return jsx(FormFieldset, rest, jsx(FormLegend, _extends({
    labelSize: labelSize,
    required: fieldData.meta.required
  }, fieldData.getLegendProps(label), {
    css: finalLabelCss
  })), jsx("div", {
    css: fieldBodyCss
  }, children, jsx(FormHint, fieldData.hintProps, hint), jsx(FormError, fieldData.errorProps, error)));
}
FormFieldBlock.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormFieldBlock",
  "props": {
    "id": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "label": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "StyledLabelSize"
      },
      "description": ""
    },
    "error": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "hint": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "validationMode": {
      "required": false,
      "tsType": {
        "name": "ErrorValidationMode"
      },
      "description": ""
    },
    "layout": {
      "required": false,
      "tsType": {
        "name": "FormFieldBlockLayout"
      },
      "description": ""
    },
    "required": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "children": {
      "required": true,
      "tsType": {
        "name": "union",
        "raw": "React.ReactNode | RenderFieldControl",
        "elements": [{
          "name": "ReactReactNode",
          "raw": "React.ReactNode"
        }, {
          "name": "signature",
          "type": "function",
          "raw": "(\n  controlProps: AriaFormFieldData[\"controlProps\"]\n) => React.ReactNode",
          "signature": {
            "arguments": [{
              "name": "controlProps",
              "type": {
                "name": "AriaFormFieldData[\"controlProps\"]",
                "raw": "AriaFormFieldData[\"controlProps\"]"
              }
            }],
            "return": {
              "name": "ReactReactNode",
              "raw": "React.ReactNode"
            }
          }
        }]
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/FormFieldBlock.tsx"] = {
    name: "FormFieldBlock",
    docgenInfo: FormFieldBlock.__docgenInfo,
    path: "src/components/form/components/FormFieldBlock.tsx"
  };
}

FormFieldBlockBoilerplate.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormFieldBlockBoilerplate",
  "props": {
    "fieldData": {
      "required": true,
      "tsType": {
        "name": "AriaFormFieldData"
      },
      "description": ""
    },
    "label": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "StyledLabelSize"
      },
      "description": ""
    },
    "error": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "hint": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "layout": {
      "required": false,
      "tsType": {
        "name": "FormFieldBlockLayout"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/FormFieldBlock.tsx"] = {
    name: "FormFieldBlockBoilerplate",
    docgenInfo: FormFieldBlockBoilerplate.__docgenInfo,
    path: "src/components/form/components/FormFieldBlock.tsx"
  };
}

FormGroupFieldBlock.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormGroupFieldBlock",
  "props": {
    "id": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "label": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "StyledLabelSize"
      },
      "description": ""
    },
    "error": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "hint": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "validationMode": {
      "required": false,
      "tsType": {
        "name": "ErrorValidationMode"
      },
      "description": ""
    },
    "layout": {
      "required": false,
      "tsType": {
        "name": "FormFieldBlockLayout"
      },
      "description": ""
    },
    "required": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "children": {
      "required": true,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "(\n  controlProps: Pick<\n    AriaFormGroupFieldData,\n    \"getOptionControlProps\" | \"getOptionLabelProps\"\n  >\n) => React.ReactNode",
        "signature": {
          "arguments": [{
            "name": "controlProps",
            "type": {
              "name": "Pick",
              "elements": [{
                "name": "AriaFormGroupFieldData"
              }, {
                "name": "union",
                "raw": "\"getOptionControlProps\" | \"getOptionLabelProps\"",
                "elements": [{
                  "name": "literal",
                  "value": "\"getOptionControlProps\""
                }, {
                  "name": "literal",
                  "value": "\"getOptionLabelProps\""
                }]
              }],
              "raw": "Pick<\n  AriaFormGroupFieldData,\n  \"getOptionControlProps\" | \"getOptionLabelProps\"\n>"
            }
          }],
          "return": {
            "name": "ReactReactNode",
            "raw": "React.ReactNode"
          }
        }
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/FormFieldBlock.tsx"] = {
    name: "FormGroupFieldBlock",
    docgenInfo: FormGroupFieldBlock.__docgenInfo,
    path: "src/components/form/components/FormFieldBlock.tsx"
  };
}

FormGroupFieldBlockBoilerplate.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormGroupFieldBlockBoilerplate",
  "props": {
    "fieldData": {
      "required": true,
      "tsType": {
        "name": "AriaFormGroupFieldData"
      },
      "description": ""
    },
    "label": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "StyledLabelSize"
      },
      "description": ""
    },
    "error": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "hint": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "layout": {
      "required": false,
      "tsType": {
        "name": "FormFieldBlockLayout"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/FormFieldBlock.tsx"] = {
    name: "FormGroupFieldBlockBoilerplate",
    docgenInfo: FormGroupFieldBlockBoilerplate.__docgenInfo,
    path: "src/components/form/components/FormFieldBlock.tsx"
  };
}

export { FormFieldBlock, FormFieldBlockBoilerplate, FormGroupFieldBlock, FormGroupFieldBlockBoilerplate };
//# sourceMappingURL=FormFieldBlock.esm.js.map
