import { extends as _extends, objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import { getTheme } from '../../../theme/index.esm.js';
import { showFormFieldDeprecatedMessage } from '../../../utils/maintenance/deprecationMessages.esm.js';
import { getFocusStyles } from './FormField.helpers.esm.js';
import { useStyledFieldLabel, useStyledFieldError, useStyledFieldHint } from './FormField.esm.js';
import { useFormFieldSkeleton } from '../../form-skeletons/components/FormFieldSkeleton.esm.js';
import { CheckboxFieldSkeleton, CheckboxFieldSkeletonControl, CheckboxFieldSkeletonLabel, CheckboxFieldSkeletonError, CheckboxFieldSkeletonHint } from '../../form-skeletons/components/CheckboxFieldSkeleton.esm.js';

function CheckboxField(props) {
  showFormFieldDeprecatedMessage("CheckboxField");
  return jsx(CheckboxFieldSkeleton, props);
}
var CheckboxFieldControl = React__default.forwardRef(function CheckboxFieldControl(props, ref) {
  var _useFormFieldSkeleton = useFormFieldSkeleton(),
      hasError = _useFormFieldSkeleton.hasError;

  return jsx(CheckboxFieldSkeletonControl, _extends({
    ref: ref,
    css: styledCheckboxCss(hasError)
  }, props));
});
var CHECKBOX_WIDTH = "20px";
var CHECKBOX_VERTICAL_OFFSET_CALC = "(1em - 16px) * 0.5";

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 d='M7.32505 15.1584L4.19049 10.8791C3.87533 10.423 3.95905 9.80199 4.38373 9.44564L4.38374 9.44564C4.80842 9.08929 5.43452 9.11468 5.82896 9.50424L9.49899 13.3343C10.0964 13.9243 10.0568 14.9003 9.41361 15.44L9.4136 15.44C8.7704 15.9797 7.80237 15.8492 7.32505 15.1584Z' fill='".concat(encodedColor, "'/%3E%3Cpath d='M7.58182 15.4296C6.92843 14.8813 6.86426 13.8988 7.44078 13.2703L14.7221 5.33129C15.0919 4.92814 15.7135 4.88754 16.1326 5.23917L16.1326 5.23917C16.5517 5.59081 16.6196 6.21003 16.2868 6.64418L9.73285 15.1935C9.21392 15.8704 8.23522 15.9779 7.58182 15.4296L7.58182 15.4296Z' fill='").concat(encodedColor, "'/%3E%3Cpath d='M7.747 11.5322C8.1138 11.9724 8.38279 12.2658 8.8474 11.7523C9.31202 11.2388 8.70068 13.0483 8.70068 13.0483L7.18457 12.5593L7.747 11.5322Z' fill='").concat(encodedColor, "'/%3E%3C/svg%3E\")");
};

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

var styledCheckboxCss = function styledCheckboxCss(hasError) {
  return function (theme) {
    return {
      position: "absolute",
      opacity: 0,
      "&:focus + label::before": _objectSpread2({}, getFocusStyles(theme, hasError)),
      "&:checked + label::before": {
        backgroundColor: theme.colors.purple[60],
        borderColor: theme.colors.purple[60],
        backgroundOrigin: "border-box",
        backgroundImage: getCheckImage(staticColors.white)
      },
      "&:checked:disabled + label::before": {
        backgroundImage: getCheckImage(staticColors.grey[40])
      },
      "&:disabled + label::before": {
        backgroundColor: theme.colors.grey[10],
        borderColor: theme.colors.grey[30],
        cursor: "not-allowed"
      }
    };
  };
};

var sharedStyles = function sharedStyles(theme) {
  return {
    display: "block",
    marginLeft: 0,
    paddingLeft: "calc(".concat(CHECKBOX_WIDTH, " + ").concat(theme.space[4], ")")
  };
};

function CheckboxFieldWrapper(props) {
  return jsx("div", props);
}

var labelCss = function labelCss(theme) {
  return {
    cursor: "pointer",
    alignItems: "flex-start",
    marginBottom: 0,
    position: "relative",
    lineHeight: 1.3,
    ":before": {
      backgroundColor: theme.colors.white,
      border: "2px solid ".concat(theme.colors.grey[30]),
      borderRadius: "3px",
      content: "\"\"",
      display: "block",
      height: CHECKBOX_WIDTH,
      marginRight: theme.space[3],
      position: "absolute",
      top: 0,
      left: 0,
      transition: "0.1s ease-in-out",
      transform: "translate(0, calc(".concat(CHECKBOX_VERTICAL_OFFSET_CALC, "))"),
      width: CHECKBOX_WIDTH
    }
  };
};

var labelWithErrorOrHintCss = function labelWithErrorOrHintCss(theme) {
  return {
    marginBottom: theme.space[1]
  };
};

var labelWithErrorCss = function labelWithErrorCss(theme) {
  return {
    ":before": {
      border: "1px solid ".concat(theme.colors.red[60])
    }
  };
};

function CheckboxFieldLabel(_ref) {
  var children = _ref.children,
      size = _ref.size,
      isRequired = _ref.isRequired,
      props = _objectWithoutProperties(_ref, ["children", "size", "isRequired"]);

  var _useFormFieldSkeleton2 = useFormFieldSkeleton(),
      hasError = _useFormFieldSkeleton2.hasError,
      hasHint = _useFormFieldSkeleton2.hasHint;

  var _useStyledFieldLabel = useStyledFieldLabel(children, {
    size: size,
    isRequired: isRequired
  }),
      _css = _useStyledFieldLabel.css,
      styledProps = _objectWithoutProperties(_useStyledFieldLabel, ["css"]);

  return jsx(CheckboxFieldSkeletonLabel, _extends({}, props, styledProps, {
    css: function css(theme) {
      return [_css(theme), labelCss(theme), (hasError || hasHint) && labelWithErrorOrHintCss(theme), hasError && labelWithErrorCss(theme), sharedStyles(theme)];
    }
  }));
}
function CheckboxFieldError(_ref2) {
  var children = _ref2.children,
      props = _objectWithoutProperties(_ref2, ["children"]);

  var _useStyledFieldError = useStyledFieldError(children),
      _css2 = _useStyledFieldError.css,
      styledProps = _objectWithoutProperties(_useStyledFieldError, ["css"]);

  return jsx(CheckboxFieldSkeletonError, _extends({}, props, styledProps, {
    css: function css(theme) {
      return [_css2(theme), sharedStyles(theme)];
    }
  }));
}
function CheckboxFieldHint(props) {
  var _useStyledFieldHint = useStyledFieldHint(),
      _css3 = _useStyledFieldHint.css,
      styledProps = _objectWithoutProperties(_useStyledFieldHint, ["css"]);

  return jsx(CheckboxFieldSkeletonHint, _extends({}, props, styledProps, {
    css: function css(theme) {
      return [_css3(theme), sharedStyles(theme)];
    }
  }));
}
CheckboxField.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxField"
};

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

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

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

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

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

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

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

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

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

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

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

export { CheckboxField, CheckboxFieldControl, CheckboxFieldError, CheckboxFieldHint, CheckboxFieldLabel, CheckboxFieldWrapper, styledCheckboxCss };
//# sourceMappingURL=CheckboxField.esm.js.map
