import _omit from "ramda/src/omit";
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled from 'styled-components';
import { Flexbox, FormField, FormLabel, OldIcon, Tooltip, Typography } from '../../..';
import { isString } from '../../../common/utils';
import { Shape } from './Checkbox.shape';
var CHECKBOX_DEFAULT_SIZE = 5;
var checkIfHasError = function checkIfHasError(error) {
  return isString(error) && error !== '';
};
var CleanInput = React.forwardRef(function (props, ref) {
  return React.createElement("input", _extends({
    ref: ref
  }, _omit(['hasError', 'visuallyFocused'], props)));
});
var TooltipIcon = styled(OldIcon.Questionmark).withConfig({
  displayName: "Checkbox__TooltipIcon",
  componentId: "sc-vu58cg-0"
})(["display:inline;vertical-align:middle;margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
var getSize = function getSize(size) {
  if (size && size === 's') {
    return 4;
  }
  return CHECKBOX_DEFAULT_SIZE;
};
var CheckmarkBox = styled(Flexbox).withConfig({
  displayName: "Checkbox__CheckmarkBox",
  componentId: "sc-vu58cg-1"
})(["width:", "px;height:", "px;border:1px solid ", ";background:", ";position:relative;box-sizing:border-box;flex-shrink:0;", ";"], function (p) {
  return p.theme.spacing.unit(p.size);
}, function (p) {
  return p.theme.spacing.unit(p.size);
}, function (p) {
  return p.theme.colorTokens.neutral.border_default;
}, function (p) {
  return p.theme.colorTokens.neutral.background_default;
}, function (p) {
  return p.shape === Shape.Circle ? 'border-radius: 100%' : "border-radius: ".concat(p.theme.borderRadius2);
});
var StyledFormLabel = styled(FormLabel).withConfig({
  displayName: "Checkbox__StyledFormLabel",
  componentId: "sc-vu58cg-2"
})(["position:relative;&:hover ", "{border-color:", ";}"], CheckmarkBox, function (p) {
  return p.theme.colorTokens.action.border_default;
});
var Input = styled(CleanInput).attrs(function () {
  return {
    type: 'checkbox'
  };
}).withConfig({
  displayName: "Checkbox__Input",
  componentId: "sc-vu58cg-3"
})(["position:absolute;opacity:0;height:0;width:0;cursor:pointer;&:checked + ", "{border-color:", ";background:", ";svg{fill:", ";}}&[disabled] + ", "{border-color:", ";}&:checked[disabled] + ", "{border-color:", ";background:", ";svg{fill:", ";}}", " &:focus + ", "{border-color:", ";box-shadow:0 0 0 2px ", ";}", ""], CheckmarkBox, function (p) {
  return p.theme.colorTokens.action.background_default;
}, function (p) {
  return p.theme.colorTokens.action.background_default;
}, function (p) {
  return p.theme.colorTokens.neutral.icon_strong;
}, CheckmarkBox, function (p) {
  return p.theme.colorTokens.neutral.background_disabled;
}, CheckmarkBox, function (p) {
  return p.theme.colorTokens.neutral.background_disabled;
}, function (p) {
  return p.theme.colorTokens.neutral.background_disabled;
}, function (p) {
  return p.theme.colorTokens.neutral.icon_disabled;
}, function (p) {
  return p.hasError ? "\n    & + ".concat(CheckmarkBox, " {\n      border-color ").concat(p.theme.colorTokens.error.border_default, ";\n    }") : '';
}, CheckmarkBox, function (p) {
  return p.theme.colorTokens.action.background_default;
}, function (p) {
  return p.theme.colorTokens.action.border_focus;
}, function (p) {
  return !p.visuallyFocused ? '' : "& + ".concat(CheckmarkBox, " {\n        border-color: ").concat(p.theme.colorTokens.action.background_default, ";\n        box-shadow: 0 0 0 2px ").concat(p.theme.colorTokens.action.border_focus, ";\n      }\n  ");
});
var Label = styled(Typography).withConfig({
  displayName: "Checkbox__Label",
  componentId: "sc-vu58cg-4"
})(["padding-left:", "px;white-space:initial;"], function (p) {
  return p.theme.spacing.unit(2);
});
var components = {
  Label: Label,
  CheckmarkBox: CheckmarkBox
};
var Checkbox = function Checkbox(props) {
  var autoFocus = props.autoFocus,
    checked = props.checked,
    className = props.className,
    defaultChecked = props.defaultChecked,
    disabled = props.disabled,
    error = props.error,
    hasError = props.hasError,
    label = props.label,
    labelTooltip = props.labelTooltip,
    labelTooltipPosition = props.labelTooltipPosition,
    labelTooltipInModal = props.labelTooltipInModal,
    name = props.name,
    onBlur = props.onBlur,
    onChange = props.onChange,
    onClick = props.onClick,
    onFocus = props.onFocus,
    onKeyDown = props.onKeyDown,
    onKeyPress = props.onKeyPress,
    onKeyUp = props.onKeyUp,
    required = props.required,
    value = props.value,
    visuallyEmphasiseRequired = props.visuallyEmphasiseRequired,
    visuallyFocused = props.visuallyFocused,
    width = props.width,
    readOnly = props.readOnly,
    _props$size = props.size,
    size = _props$size === void 0 ? 'm' : _props$size,
    _props$shape = props.shape,
    shape = _props$shape === void 0 ? Shape.Square : _props$shape;
  return React.createElement(FormField, {
    error: error,
    width: width || 'auto'
  }, React.createElement(StyledFormLabel, {
    className: className
  }, React.createElement(Flexbox, {
    container: true,
    alignItems: "center"
  }, React.createElement(Input, {
    autoFocus: autoFocus,
    checked: checked,
    defaultChecked: defaultChecked,
    disabled: disabled,
    hasError: hasError || checkIfHasError(error),
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onClick: onClick,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    onKeyPress: onKeyPress,
    onKeyUp: onKeyUp,
    readOnly: readOnly,
    required: required,
    value: value,
    visuallyFocused: visuallyFocused
  }), React.createElement(CheckmarkBox, {
    container: true,
    alignItems: "center",
    justifyContent: "center",
    size: getSize(size),
    shape: shape
  }, React.createElement(OldIcon.CheckMark, {
    size: 3,
    color: "transparent"
  })), React.createElement(Label, {
    type: "secondary",
    color: function color(t) {
      return disabled ? t.colorTokens.neutral.text_disabled : t.colorTokens.neutral.text_default;
    }
  }, visuallyEmphasiseRequired ? "".concat(label, " *") : label, labelTooltip && React.createElement(Tooltip, _extends({
    label: labelTooltip
  }, labelTooltipPosition && {
    position: labelTooltipPosition
  }, {
    inModal: labelTooltipInModal,
    wrapChild: labelTooltipInModal
  }), React.createElement(TooltipIcon, {
    size: 4
  }))))));
};
Checkbox.components = components;
Checkbox.Shape = Shape;
export default Checkbox;