"use strict";

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

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

var _constants = require("./constants.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 $disabled = props.$disabled,
      $checked = props.$checked,
      $isError = props.$isError,
      $isIndeterminate = props.$isIndeterminate,
      $theme = props.$theme;
  var colors = $theme.colors;

  if ($disabled) {
    return colors.tickFillDisabled;
  } else if ($checked || $isIndeterminate) {
    return 'transparent';
  } else if ($isError) {
    return colors.negative400;
  } else {
    return colors.tickBorder;
  }
}

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

function getBackgroundColor(props) {
  var $disabled = props.$disabled,
      $checked = props.$checked,
      $isIndeterminate = props.$isIndeterminate,
      $isFocused = props.$isFocused,
      $isError = props.$isError,
      $isHovered = props.$isHovered,
      $isActive = props.$isActive,
      $theme = props.$theme,
      $checkmarkType = props.$checkmarkType;
  var isToggle = $checkmarkType === _constants.STYLE_TYPE.toggle;
  var colors = $theme.colors;

  if ($disabled) {
    return isToggle ? colors.sliderTrackFillDisabled : colors.tickFillDisabled;
  } else if ($isError && ($isIndeterminate || $checked)) {
    if ($isActive || $isFocused) {
      return colors.negative600;
    } else if ($isHovered) {
      return colors.negative500;
    } else {
      return colors.negative400;
    }
  } else if ($isError) {
    if ($isActive || $isFocused) {
      return colors.negative200;
    } else if ($isHovered) {
      return colors.negative100;
    } else {
      return colors.negative50;
    }
  } else if ($isIndeterminate || $checked) {
    if ($isActive || $isFocused) {
      return colors.primary600;
    } else if ($isHovered) {
      return colors.primary500;
    } else {
      return colors.primary400;
    }
  } else {
    if ($isActive || $isFocused) {
      return isToggle ? colors.sliderTrackFillActive : colors.tickFillActive;
    } else if ($isHovered) {
      return isToggle ? colors.sliderTrackFillHover : colors.tickFillHover;
    } else {
      return isToggle ? colors.sliderTrackFill : colors.tickFill;
    }
  }
}

function getCheckBackgroundColor(props) {
  var $disabled = props.$disabled,
      $theme = props.$theme;
  var colors = $theme.colors;
  return $disabled ? colors.mono600 : colors.tickMarkFill;
}

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

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: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'center' : 'flex-start',
    cursor: $disabled ? 'not-allowed' : 'pointer',
    userSelect: 'none'
  };
});
exports.Root = Root;
Root.displayName = "Root";

function getToggleThumbColor(props) {
  var $disabled = props.$disabled,
      $isFocused = props.$isFocused,
      $isError = props.$isError,
      $isHovered = props.$isHovered,
      $isActive = props.$isActive,
      $theme = props.$theme;
  var colors = $theme.colors;

  if ($disabled) {
    return colors.sliderBorderDisabled;
  } else if ($isActive || $isFocused || $isHovered) {
    return colors.sliderBorderHover;
  } else if ($isError) {
    if ($isActive || $isFocused) {
      return colors.negative200;
    } else if ($isHovered) {
      return colors.negative100;
    } else {
      return colors.negative50;
    }
  } else {
    return colors.sliderBorder;
  }
}

var getToggleCheckMarkStyles = function getToggleCheckMarkStyles(props) {
  var $checked = props.$checked,
      $theme = props.$theme,
      $disabled = props.$disabled;
  var animation = $theme.animation,
      colors = $theme.colors;
  var backgroundColor = $disabled ? colors.sliderHandleFillDisabled : colors.sliderHandleFill;
  var toggleThumbColor = getToggleThumbColor(props);
  var toggleSVG = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d)\"><rect x=\"4\" y=\"3\" width=\"24\" height=\"24\" rx=\"4\" fill=\"" + "".concat(encodeURIComponent(backgroundColor)) + "\"/><rect width=\"2\" height=\"8\"  x=\"15\" y=\"11\" rx=\"1\" fill=\"" + "".concat(encodeURIComponent(toggleThumbColor)) + "\"/></g><defs><filter id=\"filter0_d\" x=\"0\" y=\"0\" width=\"32\" height=\"32\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/></filter></defs></svg>";
  return {
    position: 'relative',
    flex: '0 0 auto',
    borderRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius200 : null,
    display: 'inline-block',
    backgroundColor: getBackgroundColor(props),
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve,
    transitionProperty: 'background-color',
    width: '40px',
    height: '16px',
    marginTop: '4px',
    marginBottom: '4px',
    marginLeft: '4px',
    marginRight: '4px',
    ':after': {
      position: 'absolute',
      top: '-8px',
      transitionProperty: 'margin-left',
      transitionDuration: animation.timing400,
      transitionTimingFunction: animation.easeOutCurve,
      marginLeft: $checked ? '16px' : '-4px',
      content: "url('data:image/svg+xml;utf8," + toggleSVG + "')",
      color: 'black'
    }
  };
};

var getDefaultCheckMarkStyles = function getDefaultCheckMarkStyles(props) {
  var $checked = props.$checked,
      $isIndeterminate = props.$isIndeterminate,
      $theme = props.$theme;
  var sizing = $theme.sizing,
      animation = $theme.animation;
  return {
    flex: '0 0 auto',
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve,
    width: sizing.scale700,
    height: sizing.scale700,
    left: '4px',
    top: '4px',
    boxSizing: 'border-box',
    borderStyle: 'solid',
    borderWidth: '2px',
    borderColor: getBorderColor(props),
    borderRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius200 : null,
    display: 'inline-block',
    verticalAlign: 'middle',
    backgroundImage: $isIndeterminate ? "url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"2\" viewBox=\"0 0 12 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"1\" y1=\"-1\" x2=\"11\" y2=\"-1\" transform=\"translate(0 2)\" stroke=\"".concat(encodeURIComponent(getCheckBackgroundColor(props)), "\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');") : $checked ? "url('data:image/svg+xml;utf8,<svg width=\"11\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\" fill=\"".concat(encodeURIComponent(getCheckBackgroundColor(props)), "\"/></svg>');") : null,
    backgroundColor: getBackgroundColor(props),
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    marginTop: $theme.sizing.scale0,
    marginBottom: $theme.sizing.scale0,
    marginLeft: $theme.sizing.scale200,
    marginRight: $theme.sizing.scale200
  };
};

var Checkmark = (0, _index.styled)('span', function (props) {
  var $checkmarkType = props.$checkmarkType;
  return $checkmarkType === _constants.STYLE_TYPE.toggle ? getToggleCheckMarkStyles(props) : getDefaultCheckMarkStyles(props);
});
exports.Checkmark = Checkmark;
Checkmark.displayName = "Checkmark";
var Label = (0, _index.styled)('div', function (props) {
  var $theme = props.$theme,
      $checkmarkType = props.$checkmarkType;
  var typography = $theme.typography;
  return _objectSpread({
    flex: $checkmarkType === _constants.STYLE_TYPE.toggle ? 'auto' : null,
    verticalAlign: 'middle'
  }, getLabelPadding(props), {
    color: getLabelColor(props)
  }, typography.font350, {
    lineHeight: '24px'
  });
}); // 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,
  height: 0,
  overflow: 'hidden',
  margin: 0,
  padding: 0
});
exports.Input = Input;
Input.displayName = "Input";