"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Checkbox = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Icons = require("../Icons");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var Checkbox = function Checkbox(_ref) {
  var isChecked = _ref.isChecked,
      label = _ref.label,
      onChange = _ref.onChange,
      name = _ref.name,
      value = _ref.value,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'normal' : _ref$size;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    size: size,
    onClick: function onClick() {
      return onChange(value);
    }
  }, /*#__PURE__*/_react["default"].createElement(Label, {
    tabIndex: "0",
    size: size
  }, /*#__PURE__*/_react["default"].createElement(Input, {
    type: "checkbox",
    name: name
  }), /*#__PURE__*/_react["default"].createElement(Span, {
    size: size,
    isChecked: isChecked
  }, isChecked && /*#__PURE__*/_react["default"].createElement(_Icons.IconCheck, null)), label));
};

exports.Checkbox = Checkbox;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  word-break: break-all;\n  box-sizing: border-box;\n  user-select: none;\n"])));

var Label = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  font-size: ", ";\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  color: ", ";\n\n  @media (min-width: ", ") {\n    &:hover,\n    &:focus {\n      opacity: 0.6;\n    }\n  }\n"])), function (_ref2) {
  var size = _ref2.size;

  if (size === 'tiny') {
    return '1.4rem';
  }

  if (size === 'small') {
    return '1.5rem';
  }

  return '1.6rem';
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.min;
});

var Input = _styledComponents["default"].input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: none;\n"])));

var Span = _styledComponents["default"].span.attrs(function (props) {
  return {
    className: props.size === 'tiny' ? 'mr-2' : 'mr-3'
  };
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: ", ";\n  width: ", ";\n\n  border: 0.2rem solid\n    ", ";\n\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: ", ";\n\n  & svg {\n    width: ", ";\n  }\n"])), function (_ref5) {
  var size = _ref5.size;

  if (size === 'tiny') {
    return '2rem';
  }

  return '2.4rem';
}, function (_ref6) {
  var size = _ref6.size;

  if (size === 'tiny') {
    return '2rem';
  }

  return '2.4rem';
}, function (props) {
  if (props.size === 'tiny' && !props.isChecked) {
    return props.theme.palette.light;
  }

  return props.theme.palette.primary;
}, function (props) {
  return props.theme.palette[props.isChecked ? 'primary' : 'secondary'];
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
}, function (_ref8) {
  var size = _ref8.size;

  if (size === 'tiny') {
    return '0.2rem';
  }

  return '0';
}, function (_ref9) {
  var size = _ref9.size;

  if (size === 'tiny') {
    return '1.4rem';
  }

  return '1.6rem';
});
//# sourceMappingURL=index.js.map