import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledCheckmark } from './StyledCheckmark';
import { StyledInput } from '../../CheckboxRadioBase/partials/StyledInput';
var RADIO_ACTIVE_BORDER_WIDTH = '2px';
var spacing = selectors.spacing,
  fontSize = selectors.fontSize,
  color = selectors.color;
var BackgroundColor = css(["", ""], function (_ref) {
  var $isDisabled = _ref.$isDisabled,
    $hasContainer = _ref.$hasContainer,
    $isChecked = _ref.$isChecked;
  if (!$hasContainer) {
    return 'transparent';
  }
  if ($isDisabled) {
    return color('neutral', '000');
  }
  if ($isChecked) {
    return color('action', '000');
  }
  return color('neutral', 'white');
});
var CheckmarkBackgroundColor = css(["", ""], function (_ref2) {
  var $isDisabled = _ref2.$isDisabled,
    $hasContainer = _ref2.$hasContainer;
  if ($hasContainer) {
    return BackgroundColor;
  }
  return color('neutral', $isDisabled ? '000' : 'white');
});
var CheckmarkCheckedFillColor = css(["", ""], function (_ref3) {
  var $isDisabled = _ref3.$isDisabled,
    $hasContainer = _ref3.$hasContainer;
  return $isDisabled ? color('neutral', $hasContainer ? '200' : '100') : color('action', '500');
});
export var StyledRadio = styled.div.withConfig({
  displayName: "StyledRadio",
  componentId: "sc-1lecpvc-0"
})(["display:inline-flex;position:relative;padding:", ";cursor:pointer;font-size:", ";user-select:none;background:", ";*{cursor:pointer;}", "{&::before{display:block;background:", ";box-shadow:0 0 0 0 transparent;}}", " ", " ", " ", ":checked ~ ", "{&::before{box-shadow:0 0 0 ", " ", ";}&::after{display:block;background:", ";border:2px solid ", ";}}", " ", ""], function (_ref4) {
  var $hasContainer = _ref4.$hasContainer;
  return $hasContainer ? "0 0 0 ".concat(spacing('13')) : "0 0 0 ".concat(spacing('12'));
}, fontSize('base'), BackgroundColor, StyledCheckmark, CheckmarkBackgroundColor, function (_ref5) {
  var $hasContainer = _ref5.$hasContainer;
  return $hasContainer && css(["border:1px solid ", ";border-radius:15px;&:focus-within,&:active{outline:none;border-color:", ";box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}"], color('neutral', '200'), color('action', '500'), color('action', '500'), color('action', '100'));
}, function (_ref6) {
  var $isDisabled = _ref6.$isDisabled;
  return !$isDisabled && css(["&:hover ", ",", ":active ~ ", "{&::before{box-shadow:0 0 0 ", " ", ";}}"], StyledCheckmark, StyledInput, StyledCheckmark, RADIO_ACTIVE_BORDER_WIDTH, color('action', '500'));
}, function (_ref7) {
  var $hasContainer = _ref7.$hasContainer;
  return !$hasContainer && css(["", ":focus ~ ", "::before{box-shadow:0 0 0 ", " ", ";}"], StyledInput, StyledCheckmark, RADIO_ACTIVE_BORDER_WIDTH, CheckmarkCheckedFillColor);
}, StyledInput, StyledCheckmark, RADIO_ACTIVE_BORDER_WIDTH, CheckmarkCheckedFillColor, CheckmarkCheckedFillColor, CheckmarkBackgroundColor, function (_ref8) {
  var $isDisabled = _ref8.$isDisabled;
  return $isDisabled && css(["cursor:not-allowed;*{cursor:not-allowed;}border-color:transparent;&:focus-within,&:active{border-color:transparent;box-shadow:none;}"]);
}, function (_ref9) {
  var $isInvalid = _ref9.$isInvalid;
  return $isInvalid && css(["border-color:", ";box-shadow:0 0 0 2px ", ";"], color('danger', '800'), color('danger', '800'));
});