"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Input = exports.Label = exports.RadioMarkOuter = exports.RadioMarkInner = exports.Root = exports.RadioGroupRoot = void 0;

var _index = require("../styles/index.js");

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function getBorderColor(props) {
  var $checked = props.$checked,
      $isError = props.$isError,
      $theme = props.$theme;
  var colors = $theme.colors;
  return $isError ? colors.negative400 : $checked ? colors.primary400 : colors.mono700;
}

function getLabelPadding(props) {
  var _props$$labelPlacemen = props.$labelPlacement,
      $labelPlacement = _props$$labelPlacemen === void 0 ? '' : _props$$labelPlacemen,
      $theme = props.$theme;
  var scale200 = $theme.sizing.scale200;
  var paddingSide = 'padding' + $labelPlacement.replace(/^\w/, function (c) {
    return c.toUpperCase();
  });
  return _defineProperty({}, paddingSide, scale200);
}

function getLabelColor(props) {
  var $disabled = props.$disabled,
      $theme = props.$theme;
  var colors = $theme.colors;
  return $disabled ? colors.foregroundAlt : colors.foreground;
}

var RadioGroupRoot = (0, _index.styled)('div', function (props) {
  var $disabled = props.$disabled,
      $align = props.$align;
  return {
    flexDirection: $align === 'horizontal' ? 'row' : 'column',
    display: 'flex',
    alignItems: $align === 'horizontal' ? 'center' : 'flex-start',
    cursor: $disabled ? 'not-allowed' : 'pointer'
  };
});
exports.RadioGroupRoot = RadioGroupRoot;
RadioGroupRoot.displayName = "RadioGroupRoot";
var Root = (0, _index.styled)('label', function (props) {
  var $disabled = props.$disabled,
      $labelPlacement = props.$labelPlacement;
  return {
    flexDirection: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'column' : 'row',
    display: 'flex',
    alignItems: 'center',
    cursor: $disabled ? 'not-allowed' : 'pointer'
  };
});
exports.Root = Root;
Root.displayName = "Root";
var RadioMarkInner = (0, _index.styled)('div', function (props) {
  var $checked = props.$checked,
      $disabled = props.$disabled,
      $theme = props.$theme,
      $isFocused = props.$isFocused,
      $isError = props.$isError;
  var animation = $theme.animation,
      colors = $theme.colors,
      sizing = $theme.sizing;
  var activeStyle = {
    backgroundColor: $checked || $isError ? null : $isFocused ? colors.mono500 : !$disabled && !$checked ? colors.mono400 : null
  };
  return {
    backgroundColor: 'white',
    borderRadius: '50%',
    height: $checked ? sizing.scale100 : sizing.scale600,
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve,
    width: $checked ? sizing.scale100 : sizing.scale600,
    ':hover': activeStyle,
    ':active': activeStyle
  };
});
exports.RadioMarkInner = RadioMarkInner;
RadioMarkInner.displayName = "RadioMarkInner";
var RadioMarkOuter = (0, _index.styled)('div', function (props) {
  var sizing = props.$theme.sizing;
  return {
    alignItems: 'center',
    backgroundColor: getBorderColor(props),
    borderRadius: '50%',
    display: 'flex',
    height: sizing.scale700,
    justifyContent: 'center',
    marginTop: sizing.scale200,
    marginRight: sizing.scale200,
    marginBottom: sizing.scale200,
    marginLeft: sizing.scale200,
    verticalAlign: 'middle',
    width: sizing.scale700,
    flexShrink: 0
  };
});
exports.RadioMarkOuter = RadioMarkOuter;
RadioMarkOuter.displayName = "RadioMarkOuter";
var Label = (0, _index.styled)('div', function (props) {
  var typography = props.$theme.typography;
  return _objectSpread({
    verticalAlign: 'middle'
  }, getLabelPadding(props), {
    color: getLabelColor(props)
  }, typography.font400);
}); // tricky style for focus event cause display: none doesn't work

exports.Label = Label;
Label.displayName = "Label";
var Input = (0, _index.styled)('input', {
  opacity: 0,
  width: 0,
  overflow: 'hidden',
  margin: 0,
  padding: 0
});
exports.Input = Input;
Input.displayName = "Input";