import { styled } from '../styled';
import { easeOutBackTransition } from '../styled/mixins';
import { CHECKBOX_SIZE, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from './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;
};
export const Wrapper = styled('span', {
    shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),
}) `
  display: flex;
  justify-content: center;

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

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

    ${easeOutBackTransition};
  }

  .${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,
})};

    ${easeOutBackTransition};
  }

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

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

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

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

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

    .${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,
})};
    }
  }
`;
export const Input = styled.input `
  cursor: ${({ disabled }) => !disabled && 'pointer'};

  position: absolute;

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

  opacity: 0;

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

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

  width: ${CHECKBOX_SIZE};
  height: ${CHECKBOX_SIZE};

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

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