import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import _pt from 'prop-types';
import { getTheme } from '../../../theme/index.esm.js';
import { showFormFieldDeprecatedMessage } from '../../../utils/maintenance/deprecationMessages.esm.js';
import { getFocusStyles } from './FormField.helpers.esm.js';
import { useFormFieldSkeleton } from '../../form-skeletons/components/FormFieldSkeleton.esm.js';
import { RadioButtonFieldSkeleton, RadioButtonFieldSkeletonOption, RadioButtonFieldSkeletonOptionLabel, RadioButtonFieldSkeletonLabel, RadioButtonFieldSkeletonHint, RadioButtonFieldSkeletonError } from '../../form-skeletons/components/RadioButtonFieldSkeleton.esm.js';
import { FormGroupFieldProvider, formGroupFieldCss, useStyledGroupFieldOptionLabel, INPUT_WIDTH, INPUT_VERTICAL_OFFSET_CALC, useStyledGroupFieldLabel, useStyledGroupFieldHint, useStyledGroupFieldError, FormGroupFieldOptions, FormGroupFieldOptionWrapper } from './FormGroupField.esm.js';

function RadioButtonField(_ref) {
  var optionsDirection = _ref.optionsDirection,
      rest = _objectWithoutProperties(_ref, ["optionsDirection"]);

  showFormFieldDeprecatedMessage("RadioButtonField", true);
  return jsx(FormGroupFieldProvider, {
    optionsDirection: optionsDirection
  }, jsx(RadioButtonFieldSkeleton, _extends({
    css: function css(theme) {
      return [formGroupFieldCss()];
    }
  }, rest)));
}

var getCheckImage = function getCheckImage(color) {
  var encodedColor = encodeURIComponent(color);
  return "url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 0H0V20H20V0ZM10 14C12.2091 14 14 12.2091 14 10C14 7.79086 12.2091 6 10 6C7.79086 6 6 7.79086 6 10C6 12.2091 7.79086 14 10 14Z' fill='".concat(encodedColor, "'/%3E%3C/svg%3E%0A\")");
};

var _getTheme = getTheme(),
    staticColors = _getTheme.colors;

var RadioButtonFieldOption = React__default.forwardRef(function RadioButtonFieldOption(props, ref) {
  return jsx(RadioButtonFieldSkeletonOption, _extends({
    ref: ref,
    css: function css(theme) {
      return [{
        position: "absolute",
        opacity: 0,
        "&:checked + label": {
          borderColor: theme.colors.purple[60]
        },
        "&:checked + label::before": {
          borderColor: theme.colors.purple[60],
          backgroundColor: theme.colors.purple[60],
          backgroundOrigin: "border-box",
          backgroundImage: getCheckImage(staticColors.white)
        },
        "&:not(:checked):not(:disabled):hover + label::before": {
          borderColor: theme.colors.purple[40]
        },
        "&:disabled + label::before": {
          backgroundColor: theme.colors.grey[10],
          borderColor: theme.colors.grey[30],
          cursor: "not-allowed"
        },
        "&:checked:disabled + label::before": {
          backgroundImage: getCheckImage(staticColors.grey[10]),
          backgroundColor: theme.colors.grey[40]
        },
        "&:focus + label::before": _objectSpread2({}, getFocusStyles(theme), {
          transition: "border-color 0.15s ease-in-out, background 0.15s ease-in-out"
        })
      }];
    }
  }, props));
});

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

var RadioButtonFieldOptionLabel = function RadioButtonFieldOptionLabel(_ref2) {
  var size = _ref2.size,
      variant = _ref2.variant,
      rest = _objectWithoutProperties(_ref2, ["size", "variant"]);

  var _useFormFieldSkeleton = useFormFieldSkeleton(),
      hasError = _useFormFieldSkeleton.hasError;

  var _useStyledGroupFieldO = useStyledGroupFieldOptionLabel({
    size: size
  }),
      _css = _useStyledGroupFieldO.css,
      styledProps = _objectWithoutProperties(_useStyledGroupFieldO, ["css"]);

  return jsx(RadioButtonFieldSkeletonOptionLabel, _extends({
    css: function css(theme) {
      return [_css(theme), {
        display: "block",
        margin: 0,
        "&:before": {
          backgroundColor: theme.colors.white,
          border: hasError ? "1px solid ".concat(theme.colors.red[60]) : "2px solid ".concat(theme.colors.grey[30]),
          display: "block",
          borderRadius: "50%",
          content: "\"\"",
          height: INPUT_WIDTH,
          position: "absolute",
          top: 0,
          left: 0,
          transition: "border-color 0.15s ease-in-out",
          transform: "translate(0, calc(".concat(INPUT_VERTICAL_OFFSET_CALC, "))"),
          width: INPUT_WIDTH
        }
      }, variant === "framed" && [getFrameStyles(theme), {
        padding: "".concat(theme.space[4], " ").concat(theme.space[5]),
        paddingLeft: "calc(".concat(INPUT_WIDTH, " + ").concat(theme.space[7], ")"),
        "&:before": {
          left: theme.space[4],
          top: theme.space[4]
        }
      }]];
    }
  }, rest, styledProps));
};
RadioButtonFieldOptionLabel.propTypes = {
  variant: _pt.oneOf(["default", "framed"]).isRequired
};
function RadioButtonFieldLabel(_ref3) {
  var children = _ref3.children,
      size = _ref3.size,
      isRequired = _ref3.isRequired,
      props = _objectWithoutProperties(_ref3, ["children", "size", "isRequired"]);

  var styledProps = useStyledGroupFieldLabel(children, {
    size: size,
    isRequired: isRequired
  });
  return jsx(RadioButtonFieldSkeletonLabel, _extends({}, props, styledProps));
}
function RadioButtonFieldHint(props) {
  var styledProps = useStyledGroupFieldHint();
  return jsx(RadioButtonFieldSkeletonHint, _extends({}, props, styledProps));
}
function RadioButtonFieldError(props) {
  var styledProps = useStyledGroupFieldError(props.children);
  return jsx(RadioButtonFieldSkeletonError, _extends({}, props, styledProps));
}
function RadioButtonFieldOptions(props) {
  return jsx(FormGroupFieldOptions, props);
}
function RadioButtonFieldOptionWrapper(_ref4) {
  var variant = _ref4.variant,
      rest = _objectWithoutProperties(_ref4, ["variant"]);

  return jsx(FormGroupFieldOptionWrapper, _extends({}, rest, {
    noSpacing: variant === "framed"
  }));
}
RadioButtonFieldOptionWrapper.propTypes = {
  variant: _pt.oneOf(["default", "framed"]).isRequired
};
function RadioButtonFieldOptionItem(_ref5) {
  var label = _ref5.label,
      value = _ref5.value,
      _ref5$variant = _ref5.variant,
      variant = _ref5$variant === void 0 ? "default" : _ref5$variant,
      rest = _objectWithoutProperties(_ref5, ["label", "value", "variant"]);

  return jsx(RadioButtonFieldOptionWrapper, {
    variant: variant
  }, jsx(RadioButtonFieldOption, _extends({
    value: value
  }, rest)), jsx(RadioButtonFieldOptionLabel, {
    optionValue: value,
    variant: variant
  }, label));
}
RadioButtonFieldOptionItem.propTypes = {
  label: _pt.node.isRequired,
  variant: _pt.oneOf(["default", "framed"])
};
RadioButtonField.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonField"
};

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

RadioButtonFieldOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldOption"
};

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

RadioButtonFieldOptionLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldOptionLabel"
};

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

RadioButtonFieldLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldLabel"
};

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

RadioButtonFieldHint.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldHint"
};

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

RadioButtonFieldError.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldError"
};

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

RadioButtonFieldOptions.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldOptions"
};

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

RadioButtonFieldOptionWrapper.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldOptionWrapper",
  "props": {
    "variant": {
      "required": true,
      "tsType": {
        "name": "union",
        "raw": "\"default\" | \"framed\"",
        "elements": [{
          "name": "literal",
          "value": "\"default\""
        }, {
          "name": "literal",
          "value": "\"framed\""
        }]
      },
      "description": ""
    }
  }
};

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

RadioButtonFieldOptionItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioButtonFieldOptionItem",
  "props": {
    "variant": {
      "defaultValue": {
        "value": "`default`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "\"default\" | \"framed\"",
        "elements": [{
          "name": "literal",
          "value": "\"default\""
        }, {
          "name": "literal",
          "value": "\"framed\""
        }]
      },
      "description": ""
    },
    "label": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

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

export { RadioButtonField, RadioButtonFieldError, RadioButtonFieldHint, RadioButtonFieldLabel, RadioButtonFieldOption, RadioButtonFieldOptionItem, RadioButtonFieldOptionLabel, RadioButtonFieldOptionWrapper, RadioButtonFieldOptions };
//# sourceMappingURL=RadioButtonField.esm.js.map
