"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToggleTrack = exports.ToggleInner = exports.Toggle = 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 paddingDirection;

  switch ($labelPlacement) {
    case 'top':
      paddingDirection = 'Bottom';
      break;

    case 'bottom':
      paddingDirection = 'Top';
      break;

    case 'left':
      paddingDirection = 'Right';
      break;

    default:
    case 'right':
      paddingDirection = 'Left';
      break;
  }

  var sizing = $theme.sizing;
  var scale300 = sizing.scale300;
  return _defineProperty({}, "padding".concat(paddingDirection), scale300);
}

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.tickFillErrorSelectedHoverActive;
    } else if ($isHovered) {
      return colors.tickFillErrorSelectedHover;
    } else {
      return colors.tickFillErrorSelected;
    }
  } else if ($isError) {
    if ($isActive || $isFocused) {
      return colors.tickFillErrorHoverActive;
    } else if ($isHovered) {
      return colors.tickFillErrorHover;
    } else {
      return colors.tickFillError;
    }
  } else if ($isIndeterminate || $checked) {
    if ($isActive || $isFocused) {
      return colors.tickFillSelectedHoverActive;
    } else if ($isHovered) {
      return colors.tickFillSelectedHover;
    } else {
      return colors.tickFillSelected;
    }
  } 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 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";
var Checkmark = (0, _index.styled)('span', function (props) {
  var $checked = props.$checked,
      $disabled = props.$disabled,
      $isIndeterminate = props.$isIndeterminate,
      $theme = props.$theme;
  var sizing = $theme.sizing,
      animation = $theme.animation;
  var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $theme.colors.tickMarkFill;
  var indeterminate = encodeURIComponent("\n    <svg width=\"12\" height=\"2\" viewBox=\"0 0 12 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <line\n      x1=\"1\"\n      y1=\"-1\"\n      x2=\"11\"\n      y2=\"-1\"\n      transform=\"translate(0 2)\"\n      stroke=\"".concat(tickColor, "\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n    </svg>\n  "));
  var check = encodeURIComponent("\n    <svg width=\"11\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        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\"\n        fill=\"".concat(tickColor, "\"\n      />\n    </svg>\n  "));
  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;charset=utf8,".concat(indeterminate, "');") : $checked ? "url('data:image/svg+xml;charset=utf8,".concat(check, "');") : null,
    backgroundColor: getBackgroundColor(props),
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    marginTop: $theme.sizing.scale0,
    marginBottom: $theme.sizing.scale0,
    marginLeft: $theme.sizing.scale0,
    marginRight: $theme.sizing.scale0
  };
});
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,
  position: 'absolute'
});
exports.Input = Input;
Input.displayName = "Input";
var Toggle = (0, _index.styled)('div', function (props) {
  return _objectSpread({}, props.$theme.borders.border300, {
    alignItems: 'center',
    backgroundColor: props.$theme.colors.mono100,
    borderRadius: props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null,
    boxShadow: props.$theme.lighting.shadow400,
    display: 'flex',
    justifyContent: 'center',
    height: props.$theme.sizing.scale800,
    width: props.$theme.sizing.scale800
  });
});
exports.Toggle = Toggle;
Toggle.displayName = "Toggle";
var ToggleInner = (0, _index.styled)('div', function (props) {
  function backgroundColor() {
    if (props.$disabled) {
      return props.$theme.colors.sliderHandleInnerFillDisabled;
    }

    if (props.$isActive && props.$checked) {
      return props.$theme.colors.sliderHandleInnerFillSelectedActive;
    }

    if (props.$isHovered && props.$checked) {
      return props.$theme.colors.sliderHandleInnerFillSelectedHover;
    }

    return props.$theme.colors.sliderHandleInnerFill;
  }

  return {
    height: props.$theme.sizing.scale300,
    width: props.$theme.sizing.scale0,
    borderRadius: props.$theme.borders.radius100,
    backgroundColor: backgroundColor()
  };
});
exports.ToggleInner = ToggleInner;
ToggleInner.displayName = "ToggleInner";
var ToggleTrack = (0, _index.styled)('div', function (props) {
  return {
    alignItems: 'center',
    backgroundColor: getBackgroundColor(props),
    borderRadius: props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null,
    display: 'flex',
    height: props.$theme.sizing.scale600,
    justifyContent: props.$checked ? 'flex-end' : 'flex-start',
    marginTop: props.$theme.sizing.scale100,
    marginBottom: props.$theme.sizing.scale100,
    marginLeft: props.$theme.sizing.scale100,
    marginRight: props.$theme.sizing.scale100,
    width: props.$theme.sizing.scale1000
  };
});
exports.ToggleTrack = ToggleTrack;
ToggleTrack.displayName = "ToggleTrack";