import { fontSizes, fontWeights, lineHeights } from '../global/typography';
import { sizes } from '../global/sizes';
import { space } from '../global/space';
import { borderWidths, radii } from '../global/borders';
import { shadows } from '../global/shadows';
import { systemPalette } from '../global/colors';

const inputSpace = {
  smallPadding: `${space.xsmall}px`,
  mediumPadding: `${space.small}px`,
  largePadding: `${space.small}px`,
  tagMargin: `${space.xsmall}px`,
};

const inputFontSizes = {
  small: `${fontSizes.small}px`,
  medium: `${fontSizes.medium}px`,
  large: `${fontSizes.large}px`,
};

const inputLineHeights = {
  small: `${lineHeights.small}px`,
  medium: `${lineHeights.medium}px`,
  large: `${lineHeights.large}px`,
};

const inputFontWeights = {
  default: fontWeights.regular,
};

const inputSizes = {
  small: `${sizes.large}px`,
  medium: `${sizes.xlarge}px`,
  large: `${sizes.xxlarge}px`,
  textAreaSmall: `${
    (borderWidths.base + space.xsmall + lineHeights.large) * 2
  }px`,
  textAreaMedium: `${
    (borderWidths.base + space.small + lineHeights.medium) * 2
  }px`,
  textAreaLarge: `${
    (borderWidths.base + space.small + lineHeights.small) * 2
  }px`,
  tagInputMinWidth: `${sizes.xxxlarge}px`,
};

const inputBorderWidths = {
  default: `${borderWidths.base}px`,
};

const inputRadii = {
  default: `${radii.base}px`,
};

const inputColors = {
  text: systemPalette.text,
  disabledText: systemPalette.subduedText,
  placeholder: systemPalette.subduedText,
  border: systemPalette.defaultBorder,
  focusBorder: systemPalette.primary,
  background: systemPalette.defaultLightBackground,
  disabledBackground: systemPalette.defaultBackground,
  invalidBorder: systemPalette.danger,
};

const inputShadows = {
  focus: shadows.primary,
  invalidFocus: shadows.danger,
};

export {
  inputSizes,
  inputSpace,
  inputFontSizes,
  inputLineHeights,
  inputFontWeights,
  inputBorderWidths,
  inputRadii,
  inputColors,
  inputShadows,
};