import { ColorValue, TextStyle, ViewStyle } from 'react-native';

import { color, metrics, spacing, typography } from '../../theme';

export type TextFieldPresets = 'input';

/**
 * View presets
 */
export const viewPresets: Record<TextFieldPresets, ViewStyle> = {
  input: {
    height: spacing[7],
    marginBottom: spacing[5],
    paddingHorizontal: spacing[0] + spacing[3],
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: metrics.borderWidth[1],
    borderRadius: metrics.borderRadius[2],
    borderColor: color.palette.mercury,
    backgroundColor: color.palette.wildSand,
  } as ViewStyle,
};

export const blurredViewPresets: Record<TextFieldPresets, ViewStyle> = {
  input: {
    borderColor: color.palette.mercury,
  } as ViewStyle,
};

export const focusedViewPresets: Record<TextFieldPresets, ViewStyle> = {
  input: {
    borderColor: color.palette.dodgerBlue,
  } as ViewStyle,
};

/**
 * Input presets
 */
export const inputPresets: Record<TextFieldPresets, TextStyle> = {
  input: {
    fontSize: typography.fontSize[4],
    fontWeight: typography.fontWeight.semiBold,
    lineHeight: typography.lineHeight[3],
  } as TextStyle,
};

export const blurredInputPresets: Record<TextFieldPresets, TextStyle> = {
  input: {
    color: color.palette.ebony,
  } as TextStyle,
};

export const focusedInputPresets: Record<TextFieldPresets, TextStyle> = {
  input: {
    color: color.text,
  } as TextStyle,
};

/**
 * Placeholder presets
 */
export const placeholderTextColorPresets: Record<TextFieldPresets, ColorValue> = {
  input: color.palette.gray,
};
