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

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

/**
 * All text will start off looking like this.
 */
const BASE_VIEW: ViewStyle = {
  height: spacing[7],
  paddingVertical: spacing[3],
  paddingHorizontal: spacing[2],
  borderRadius: metrics.borderRadius[2],
  justifyContent: 'center',
  alignItems: 'center',
};

const BASE_TEXT: TextStyle = {
  paddingHorizontal: spacing[3],
  fontSize: typography.fontSize[4],
  fontWeight: typography.fontWeight.semiBold,
  lineHeight: typography.lineHeight[4],
};

/**
 * A list of preset names.
 */
export type ButtonPresets = PresetsWithAccent | 'link';

/**
 * All the variations of text styling within the app.
 *
 * You want to customize these to whatever you need in your app.
 */
export const viewPresets: Record<ButtonPresets, ViewStyle> = {
  primary: {
    ...BASE_VIEW,
    backgroundColor: color.active,
  } as ViewStyle,
  'primary-accent': {
    ...BASE_VIEW,
    backgroundColor: color.palette.wildSand,
  } as ViewStyle,
  secondary: {
    ...BASE_VIEW,
    backgroundColor: color.palette.tundora,
  } as ViewStyle,
  'secondary-accent': {
    ...BASE_VIEW,
    backgroundColor: color.palette.mercury,
  } as ViewStyle,
  link: {
    ...BASE_VIEW,
    paddingHorizontal: 0,
    paddingVertical: 0,
    alignItems: 'flex-start',
  } as ViewStyle,
  success: {
    ...BASE_VIEW,
    backgroundColor: color.palette.fruitSalad,
  } as ViewStyle,
  'success-accent': {
    ...BASE_VIEW,
    backgroundColor: color.palette.wildSand,
  } as ViewStyle,
  error: {
    ...BASE_VIEW,
    backgroundColor: color.palette.mexicanRed,
  } as ViewStyle,
  'error-accent': {
    ...BASE_VIEW,
    backgroundColor: color.palette.wildSand,
  } as ViewStyle,
  warning: {
    ...BASE_VIEW,
    backgroundColor: color.palette.buddhaGold,
  } as ViewStyle,
  'warning-accent': {
    ...BASE_VIEW,
    backgroundColor: color.palette.wildSand,
  } as ViewStyle,
};

export const captionPresets: Record<ButtonPresets, TextStyle> = {
  primary: {
    ...BASE_TEXT,
    color: color.palette.white,
  } as TextStyle,
  'primary-accent': {
    ...BASE_TEXT,
    color: color.active,
  } as TextStyle,
  secondary: {
    ...BASE_TEXT,
    color: color.palette.white,
  } as TextStyle,
  'secondary-accent': {
    ...BASE_TEXT,
    color: color.text,
  } as TextStyle,
  link: {
    ...BASE_TEXT,
    paddingHorizontal: 0,
    paddingVertical: 0,
    color: color.active,
    fontSize: typography.fontSize[3],
  } as TextStyle,
  success: {
    ...BASE_TEXT,
    color: color.palette.white,
  } as TextStyle,
  'success-accent': {
    ...BASE_TEXT,
    color: color.palette.fruitSalad,
  } as TextStyle,
  warning: {
    ...BASE_TEXT,
    color: color.palette.white,
  } as TextStyle,
  'warning-accent': {
    ...BASE_TEXT,
    color: color.palette.buddhaGold,
  } as TextStyle,
  error: {
    ...BASE_TEXT,
    color: color.palette.white,
  } as TextStyle,
  'error-accent': {
    ...BASE_TEXT,
    color: color.palette.mexicanRed,
  } as TextStyle,
};
