"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, isIndeterminate, }) => {
    if (isDisabled) {
        return theme.palette.components.border.default;
    }
    if (isError) {
        return isHover ? theme.palette.error[700] : theme.palette.error[800];
    }
    if (isChecked || isIndeterminate) {
        return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
    }
    return isHover
        ? theme.palette.grey[900]
        : theme.palette.components.border.default;
};
exports.Wrapper = (0, styled_1.styled)('span', {
    shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),
}) `
  display: flex;
  justify-content: center;

  .${constants_1.checkboxClassnames.icon} {
    fill: ${({ $isDisabled, theme }) => $isDisabled && theme.palette.components.disabled};
  }

  .${constants_1.checkboxClassnames.symbol} {
    fill: ${({ $isDisabled, theme }) => $isDisabled ? theme.palette.grey[500] : 'white'};

    ${mixins_1.easeOutBackTransition};
  }

  .${constants_1.checkboxClassnames.outline} {
    fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled && !$isChecked && !$isIndeterminate && 'white'};
    stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
    theme,
    isHover: false,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
    isIndeterminate: $isIndeterminate,
})};

    ${mixins_1.easeOutBackTransition};
  }

  .${constants_1.checkboxClassnames.iconChecked} {
    transform-origin: bottom;
    transform: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)'};

    opacity: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 1 : 0};
  }

  .${constants_1.checkboxClassnames.iconIndeterminate} {
    transform-origin: bottom;
    transform: ${({ $isIndeterminate }) => $isIndeterminate ? 'scale(1)' : 'scale(0)'};

    opacity: ${({ $isIndeterminate }) => ($isIndeterminate ? 1 : 0)};
  }

  &:hover {
    .${constants_1.checkboxClassnames.icon} {
      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
    }

    .${constants_1.checkboxClassnames.outline} {
      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
    !$isChecked &&
    !$isIndeterminate &&
    theme.palette.background.elementHover};
      stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
    theme,
    isHover: true,
    isDisabled: $isDisabled,
    isError: $isError,
    isChecked: $isChecked,
    isIndeterminate: $isIndeterminate,
})};
    }
  }
`;
exports.Input = styled_1.styled.input `
  cursor: ${({ disabled }) => !disabled && 'pointer'};

  position: absolute;

  width: ${constants_1.CHECKBOX_SIZE};
  height: ${constants_1.CHECKBOX_SIZE};
  margin: 0;

  opacity: 0;

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

  &:focus-visible {
    ~ .${constants_1.checkboxClassnames.iconWrapper} > .${constants_1.checkboxClassnames.icon} {
      border-radius: ${({ theme }) => theme.shape.small};
      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: ${constants_1.CHECKBOX_SIZE};
  height: ${constants_1.CHECKBOX_SIZE};

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

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