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

//TODO
import { color, spacing } from '../../theme';
import { Presets } from '../../theme/presets';

/**
 * All view will start off looking like this.
 */
const BASE_VIEW: ViewStyle = {
  justifyContent: 'center',
  alignItems: 'center',
  flex: 1,
  paddingHorizontal: spacing[6],
};

/**
 * All the variations of view styling within the app.
 *
 * You want to customize these to whatever you need in your app.
 */
export const viewPresets: Record<Presets, ViewStyle> = {
  primary: {
    ...BASE_VIEW,
    backgroundColor: color.palette.white,
  } as ViewStyle,
  secondary: {
    ...BASE_VIEW,
    backgroundColor: color.palette.black,
  } as ViewStyle,
  warning: {
    ...BASE_VIEW,
    backgroundColor: color.warning,
  } as ViewStyle,
  success: {
    ...BASE_VIEW,
    backgroundColor: color.success,
  } as ViewStyle,
  error: {
    ...BASE_VIEW,
    backgroundColor: color.error,
  } as ViewStyle,
};

/**
 * All the variations of title styling.
 */
export const titlePresets: Record<Presets, TextStyle> = {
  primary: {
    color: color.palette.ebony,
  } as TextStyle,
  secondary: {
    color: color.palette.wildSand,
  } as TextStyle,
  warning: {
    color: color.palette.ebony,
  } as TextStyle,
  success: {
    color: color.palette.ebony,
  } as TextStyle,
  error: {
    color: color.palette.wildSand,
  } as TextStyle,
};

/**
 * All the variations of message styling.
 */
export const messagePresets: Record<Presets, TextStyle> = {
  primary: {
    color: color.palette.ebony,
  } as TextStyle,
  secondary: {
    color: color.palette.wildSand,
  } as TextStyle,
  warning: {
    color: color.palette.ebony,
  } as TextStyle,
  success: {
    color: color.palette.ebony,
  } as TextStyle,
  error: {
    color: color.palette.wildSand,
  } as TextStyle,
};
