import { scale } from '../../utils/scale';
import type { GlobalTheme } from '../global';

const getCheckboxTheme = (theme: GlobalTheme) => {
  const colors = {
    borders: {
      default: theme.colors.primaryOutline,
      checked: theme.colors.primaryOutline,
      disabled: theme.colors.disabledOutline,
      readonly: theme.colors.inactiveOutline,
    },
    checkboxBorder: {
      default: theme.colors.primaryOutline,
      checked: theme.colors.primary,
      disabled: theme.colors.disabledOutline,
      readonly: theme.colors.mutedOnDefaultGlobalSurface,
    },
  };

  const space = {
    iconTop: 0,
    wrapperPadding: theme.space.medium,
    iconDescriptionPadding: theme.space.smallMedium,
    inlineCheckboxGap: theme.space.small,
    inlineCheckboxMargin: theme.space.small,
  };

  const sizes = {
    icon: theme.sizes.large,
    inlineCheckbox: {
      medium: scale(14.67),
      large: theme.sizes.medium,
    },
  };

  const radii = {
    wrapper: theme.radii.medium,
    icon: theme.radii.base,
  };

  const borderWidths = {
    wrapper: theme.borderWidths.base,
    icon: theme.borderWidths.medium,
  };

  return {
    colors,
    space,
    sizes,
    radii,
    borderWidths,
  };
};

export default getCheckboxTheme;