import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { useState } from 'react';
import { OptionsContainer } from './styled-primitives/StyledFormElements.esm.js';
import { getOptionLabelOffsetStyles } from '../styles/index.esm.js';
import { FormGroupFieldBlock } from './FormFieldBlock.esm.js';
import { StyledRadioButton, StyledRadioLabel } from './styled-primitives/StyledRadio.esm.js';

var framedCss = function framedCss(theme) {
  return {
    border: "2px solid ".concat(theme.colors.white),
    borderRadius: theme.radii[3],
    margin: 0,
    width: "100%",
    transition: "border .15s ease-in-out",
    paddingTop: theme.space[4],
    paddingBottom: theme.space[4],
    paddingLeft: theme.space[4],
    paddingRight: theme.space[5]
  };
};

var RadioButtonFieldBlock = function RadioButtonFieldBlock(props) {
  var id = props.id,
      label = props.label,
      labelSize = props.labelSize,
      error = props.error,
      hint = props.hint,
      className = props.className,
      validationMode = props.validationMode,
      fieldValue = props.value,
      options = props.options,
      layout = props.layout,
      optionsDirection = props.optionsDirection,
      variant = props.variant,
      required = props.required,
      rest = _objectWithoutProperties(props, ["id", "label", "labelSize", "error", "hint", "className", "validationMode", "value", "options", "layout", "optionsDirection", "variant", "required"]);

  var _React$useState = useState(function () {
    if (fieldValue) {
      return fieldValue;
    }

    var defaultCheckedOption = options.find(function (_ref) {
      var defaultChecked = _ref.defaultChecked;
      return defaultChecked;
    });
    return defaultCheckedOption ? defaultCheckedOption.value : undefined;
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      checkedOption = _React$useState2[0],
      setCheckedOption = _React$useState2[1];

  return jsx(FormGroupFieldBlock, {
    id: id,
    label: label,
    error: error,
    hint: hint,
    required: required,
    labelSize: labelSize,
    validationMode: validationMode,
    layout: layout,
    className: className
  }, function (_ref2) {
    var getOptionControlProps = _ref2.getOptionControlProps,
        getOptionLabelProps = _ref2.getOptionLabelProps;
    return jsx(OptionsContainer, {
      optionsDirection: optionsDirection
    }, options.map(function (_ref3) {
      var value = _ref3.value,
          label = _ref3.label,
          restOption = _objectWithoutProperties(_ref3, ["value", "label"]);

      return jsx("div", {
        key: value,
        onChange: function onChange() {
          return setCheckedOption(value);
        },
        css: function css(theme) {
          return [{
            display: "flex",
            flexShrink: 0,
            marginBottom: theme.space[4]
          }, variant === "framed" ? [framedCss(theme), value === checkedOption && {
            borderColor: theme.colors.purple[60]
          }] : [{
            marginBottom: theme.space[4]
          }, optionsDirection === "row" ? {
            marginRight: theme.space[6]
          } : {
            "&:last-of-type": {
              marginBottom: 0
            }
          }]];
        }
      }, jsx(StyledRadioButton, _extends({
        value: value // Support uncontrolled field
        ,
        checked: fieldValue === undefined ? undefined : fieldValue === value
      }, getOptionControlProps(value), rest, restOption)), jsx(StyledRadioLabel, _extends({}, getOptionLabelProps(value), {
        css: getOptionLabelOffsetStyles(optionsDirection)
      }), label));
    }));
  });
};
RadioButtonFieldBlock.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldBlock"
};

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

export { RadioButtonFieldBlock };
//# sourceMappingURL=RadioButtonFieldBlock.esm.js.map
