"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconWrapper = exports.Input = exports.Wrapper = void 0;
const styled_1 = require("../styled");
const mixins_1 = require("../styled/mixins");
const constants_1 = require("./constants");
const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
    if (isDisabled) {
        return isChecked
            ? theme.palette.components.disabled
            : theme.palette.components.border.default;
    }
    if (isError) {
        return isHover ? theme.palette.error[700] : theme.palette.error[800];
    }
    if (isChecked) {
        return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
    }
    return isHover
        ? theme.palette.grey[900]
        : theme.palette.components.border.default;
};
const getFillColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
    if (isDisabled) {
        return theme.palette.components.disabled;
    }
    if (isChecked) {
        if (isError) {
            return isHover ? theme.palette.error[700] : theme.palette.error[800];
        }
        return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
    }
    return isHover ? theme.palette.background.elementHover : 'white';
};
exports.Wrapper = (0, styled_1.styled)('span', {
    shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked'].includes(prop),
}) `
  .${constants_1.radioClassnames.dot} {
    transform-origin: center;
    transform: ${({ $isChecked }) => ($isChecked ? 'scale(1)' : 'scale(0)')};

    ${mixins_1.easeOutBackTransition};
  }
  
  .${constants_1.radioClassnames.outerCircle} {
    fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
    theme,
    isHover: false,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
})};
    stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
    theme,
    isHover: false,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
})};

    ${mixins_1.easeOutBackTransition}; 
  }

  &:hover {    
    .${constants_1.radioClassnames.outerCircle} {
      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
    theme,
    isHover: true,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
})};
      stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
    theme,
    isHover: true,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
})};
    }
  }
`;
exports.Input = styled_1.styled.input `
  cursor: ${({ disabled }) => !disabled && 'pointer'};
  
  position: absolute;

  width: 32px;
  height: 32px;
  margin: 0;

  opacity: 0;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 40px;
    height: 40px;
  }

  &:focus-visible {
    ~.${constants_1.radioClassnames.iconWrapper} > .${constants_1.radioClassnames.icon} {
      border-radius: ${({ theme }) => theme.shape.medium};
      outline: 2px solid ${({ theme }) => theme.palette.components.focused};
      outline-offset: -2px;
    }
  }
`;
exports.IconWrapper = styled_1.styled.span `
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 40px;
    height: 40px;

    .${constants_1.radioClassnames.icon} {
      width: 20px;
      height: 20px;
    }
  }
`;
