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

const getPinInputTheme = (theme: GlobalTheme) => {
  const borderWidths = {
    default: theme.borderWidths.base,
    focused: theme.borderWidths.medium,
  };

  const colors = {
    default: theme.colors.primaryOutline,
    mask: theme.colors.primaryOutline,
    error: theme.colors.onErrorSurface,
    disabled: theme.colors.disabledOnDefaultGlobalSurface,
  };

  const fonts = {
    cellText: theme.fonts.neutral.semiBold,
    errorMessage: theme.fonts.neutral.regular,
  };

  const fontSizes = {
    cellText: theme.fontSizes.xxxxlarge,
    errorMessage: theme.fontSizes.small,
    hiddenInputText: theme.fontSizes['7xlarge'],
  };
  const lineHeights = {
    cellText: theme.lineHeights.xxxxlarge,
    errorMessage: theme.fontSizes.small,
  };

  const sizes = {
    cellWidth: theme.sizes.xxlarge,
    cellHeight: theme.sizes.xxxlarge,
    mask: theme.sizes.medium,
  };

  const space = {
    spacer: theme.space.medium,
    errorMessagePadding: theme.space.xsmall,
    hiddenInputText: theme.space.xsmall,
    hiddenInputHorrizontalPadding: theme.space.small,
  };

  const radii = {
    cell: theme.radii.medium,
    mask: theme.radii.rounded,
  };

  return {
    borderWidths,
    lineHeights,
    colors,
    fonts,
    fontSizes,
    sizes,
    space,
    radii,
  };
};
type GetPinInputThemeReturnType = ReturnType<typeof getPinInputTheme>;
export interface PinInputThemeType extends GetPinInputThemeReturnType {
  /**
   * @deprecated will be removed in v9
   * */
  fonts: GetPinInputThemeReturnType['fonts'];
  /**
   * @deprecated will be removed in v9
   * */
  fontSizes: GetPinInputThemeReturnType['fontSizes'];
  /**
   * @deprecated will be removed in v9
   * */
  lineHeights: GetPinInputThemeReturnType['lineHeights'];
}

export default getPinInputTheme;