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

const getTextInputTheme = (theme: GlobalTheme) => {
  const colors = {
    labelBackground: theme.colors.defaultGlobalSurface,
    containerBackground: theme.colors.defaultGlobalSurface,
    asterisks: {
      default: theme.colors.onErrorSurface,
      error: theme.colors.onErrorSurface,
      disabled: theme.colors.onErrorSurface,
      readonly: theme.colors.onErrorSurface,
      filled: theme.colors.onErrorSurface,
    },
    error: theme.colors.onErrorSurface,
    text: {
      default: theme.colors.onDefaultGlobalSurface,
      filled: theme.colors.onDefaultGlobalSurface,
      error: theme.colors.onDefaultGlobalSurface,
      readonly: theme.colors.mutedOnDefaultGlobalSurface,
      disabled: theme.colors.mutedOnDefaultGlobalSurface,
    },
    borders: {
      default: theme.colors.inactiveOutline,
      error: theme.colors.onErrorSurface,
      disabled: theme.colors.inactiveOutline,
      readonly: theme.colors.inactiveOutline,
      filled: theme.colors.inactiveOutline,
      focused: theme.colors.primaryOutline,
    },
    labels: {
      default: theme.colors.mutedOnDefaultGlobalSurface,
      error: theme.colors.onDefaultGlobalSurface,
      disabled: theme.colors.disabledOnDefaultGlobalSurface,
      readonly: theme.colors.mutedOnDefaultGlobalSurface,
      filled: theme.colors.mutedOnDefaultGlobalSurface,
    },
    labelsInsideTextInput: {
      default: theme.colors.mutedOnDefaultGlobalSurface,
      error: theme.colors.onDefaultGlobalSurface,
      disabled: theme.colors.disabledOnDefaultGlobalSurface,
      readonly: theme.colors.mutedOnDefaultGlobalSurface,
      filled: theme.colors.mutedOnDefaultGlobalSurface,
    },
    readonlyBackground: theme.colors.neutralGlobalSurface,
    maxLengthLabels: {
      default: theme.colors.onDefaultGlobalSurface,
      error: theme.colors.onErrorSurface,
      disabled: theme.colors.disabledOnDefaultGlobalSurface,
      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
      filled: theme.colors.onDefaultGlobalSurface,
    },
    placeholder: {
      default: theme.colors.onDefaultGlobalSurface,
      error: theme.colors.onDefaultGlobalSurface,
      disabled: theme.colors.disabledOnDefaultGlobalSurface,
      readonly: theme.colors.onDefaultGlobalSurface,
      filled: theme.colors.onDefaultGlobalSurface,
    },
  };

  const space = {
    containerHorizontalPadding: theme.space.medium,
    containerVerticalPadding: theme.space.small,
    labelLeft: theme.space.xlarge,
    labelTop: theme.space.xlarge / 3,
    labelPaddingBottom: theme.space.small,
    labelHorizontalPadding: theme.space.xsmall,
    inputHorizontalMargin: theme.space.smallMedium,
    errorContainerMarginRight: theme.space.xsmall,
    errorAndHelpTextContainerMarginTop: theme.space.xxsmall,
    containerMarginTop: theme.space.small,
    labelInsideTextInputMarginTop: 0,
    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
    inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
    labelFocusedTranslateY: theme.space.xsmall * 2,
    textareaLabelIdleTranslateY: theme.space.large,
  };

  const fonts = {
    text: theme.fonts.neutral.regular,
  };

  const fontSizes = {
    text: theme.fontSizes.large,
    labelInsideTextInput: theme.fontSizes.large,
    error: theme.fontSizes.small,
    maxLength: theme.fontSizes.small,
    asteriskLabel: theme.fontSizes.large,
    topLabel: theme.fontSizes.small,
  };

  const borderWidths = {
    container: {
      normal: theme.borderWidths.base,
      focused: theme.borderWidths.base,
    },
  };

  const radii = {
    container: theme.radii.medium,
  };

  const sizes = {
    errorAndHelpTextContainerMinHeight: theme.space.large,
    containerMinHeight: scale(58),
    textareaHeight: scale(120),
    textInputMaxHeight: theme.sizes['15xlarge'],
  };

  const lineHeights = {
    topLabel: theme.lineHeights.large / 2,
    label: theme.lineHeights.large,
  };

  return {
    colors,
    space,
    fonts,
    fontSizes,
    borderWidths,
    radii,
    sizes,
    lineHeights,
  };
};

export default getTextInputTheme;