import '@emotion/react';
import { TextStyle as TextStyleBase, ViewStyle as ViewStyleBase } from 'react-native';
import {
  Theme as StyledTheme,
  ThemedBorderRadiusProps,
  ThemedFontFamilyProps,
  ThemedSpaceProps,
} from 'styled-system';

declare module '@emotion/react' {
  export interface Theme extends StyledTheme {
    colors: Color;
    space: Size | number;
    sizes: Size | number;
    radii: BorderRadius | number;
    fontSizes: FontSize;
    fonts: FontFamily;
  }

  export interface Color {
    transparent: string;
    white: string;

    //button
    'button-primary': string;
    //button-underlay
    'underlay-primary': string;

    // base
    base: string;
    'base-opacity-05': string;
    'base-opacity-06': string;
    'base-hover': string;
    'base-02': string;
    'base-02-hover': string;
    'base-06': string;
    'base-03': string;
    'base-03-hover': string;
    'base-01': string;
    'base-01-hover': string;
    divider: string;

    // brand
    primary: string;
    'primary-01': string;
    'primary-02': string;
    'primary-03': string;
    'primary-hover': string;

    secondary: string;
    'secondary-01': string;
    'secondary-hover': string;
    success: string;
    'success-01': string;

    // grey
    'grey-08': string;
    'grey-07': string;
    'grey-06': string;
    'grey-05': string;
    'grey-04': string;
    'grey-03': string;
    'grey-02': string;
    'grey-01': string;

    // text
    heading: string; // 18
    title: string; // 16
    body: string; // 14
    caption: string; // 12
    'caption-bold': string; // 12
    'caption-01': string; // 12
    label: string; // 10

    // status
    'status-alert': string;
    'status-success': string;
  }

  export type ColorName = keyof Color;

  export interface Size {
    '3xs': number;
    '2xs': number;
    xs: number;
    s: number;
    m: number;
    l: number;
    xl: number;
    '2xl': number;
    '3xl': number;
  }

  export type SizeName = keyof Size;

  export interface FontFamily {
    normal: string;
    medium: string;
    bold: string;
  }

  export type FontFamilyName = keyof FontFamily;

  export interface FontSize {
    heading: number; // 18
    title: number; // 16
    body: number; // 14
    caption: number; // 12
    label: number; // 10
  }

  export type FontSizeName = keyof FontSize;

  export interface BorderRadius {
    card: number; // 10
    chip: number; //30
    button: number; // 5
  }

  export type BorderRadiusName = keyof BorderRadius;

  /**
   * Defined such that we can enforce that the font settings selected are only from the accepted
   * font list and will resolve correctly within the `variant` function of `styled-system` when
   * used, for example:
   *
   * @example
   *
   * import { TextStyle } from '@emotion/react';
   * import { variant } from 'styled-system';
   *
   * type Variant = 'body' | 'heading'
   *
   * interface TextProps  {
   *  variant: Variant
   * }
   *
   * const variants: Record<Variant, TextStyle> = {
   *   body: {
   *     fontFamily: 'regular',
   *     fontSize: 'body',
   *     color: 'text-default',
   *   },
   *   heading: {
   *     fontFamily: 'medium',
   *     fontSize: 'heading',
   *     color: 'text-50',
   *   },
   * }
   *
   * export const Text = styled.Text<TextProps & FontFamilyProps>(
   *  variant({
   *    variants,
   *  })
   *);
   */
  type ThemedTextStyle = TextStyleBase & ThemedSpaceProps & ThemedFontFamilyProps;

  export interface TextStyle extends ThemedTextStyle {}

  type ThemedViewStyle = ViewStyleBase & ThemedSpaceProps & ThemedBorderRadiusProps;
  export interface ViewStyle extends ThemedViewStyle {
    borderRadius?: keyof BorderRadius | number;
  }
}