import styled from '@emotion/native';
import { TextProps as TextPropsBase } from 'react-native';
import {
  FontFamilyProps,
  FontStyleProps,
  FontWeightProps,
  FontSizeProps,
  variant,
  color,
  ThemedColorProps,
  TextStyleProps,
  textStyle,
  space,
  ThemedSpaceProps,
  LayoutProps,
  typography,
  layout,
  TextAlignProps,
  flexbox,
  FlexProps,
  FlexShrinkProps,
  background,
  border,
  textAlign,
  fontSize,
} from 'styled-system';
import { TextStyle } from '@emotion/react';

const variants: Record<TextVariant, TextStyle> = {
  heading: {
    fontFamily: 'medium',
    fontSize: 'heading',
    fontWeight: '500',
    color: 'heading',
  },
  title: {
    fontFamily: 'medium',
    fontSize: 'title',
    fontWeight: '500',
    color: 'title',
  },
  'button-primary': {
    fontFamily: 'medium',
    fontSize: 'body',
    color: 'button-primary',
    fontWeight: '500',
  },
  'button-outline': {
    fontFamily: 'medium',
    fontSize: 'body',
    color: 'title',
    fontWeight: '500',
  },
  body: {
    fontFamily: 'normal',
    fontSize: 'body',
    color: 'body',
    fontWeight: '400',
  },
  caption: {
    fontFamily: 'normal',
    fontSize: 'caption',
    color: 'caption',
    fontWeight: '400',
  },
  'caption-bold': {
    fontFamily: 'bold',
    fontSize: 'caption',
    color: 'caption-bold',
    fontWeight: '500',
  },
  'caption-01': {
    fontFamily: 'normal',
    fontSize: 'caption',
    color: 'caption-01',
    fontWeight: '400',
  },
  label: {
    fontFamily: 'normal',
    fontSize: 'label',
    color: 'caption',
    fontWeight: '300',
  },
};

const weightVariants: Record<TextWeightVariant, TextStyle> = {
  normal: {
    fontFamily: 'normal',
    fontWeight: '400',
  },
  medium: {
    fontFamily: 'medium',
    fontWeight: '400',
  },
  bold: {
    fontFamily: 'bold',
    fontWeight: '500',
  },
};

export const Text = styled.Text<
  TextProps &
    FontFamilyProps &
    FontStyleProps &
    FontSizeProps &
    FlexProps &
    FlexShrinkProps &
    TextAlignProps &
    TextStyleProps &
    FontWeightProps &
    ThemedColorProps &
    ThemedSpaceProps &
    LayoutProps
>(
  variant({
    variants,
  }),
  variant({
    prop: 'weightVariant',
    variants: weightVariants,
  }),

  color,
  typography,
  space,
  fontSize,
  flexbox,
  textAlign,
  background,
  border,
  layout,
  textStyle
);
Text.defaultProps = {
  allowFontScaling: true,
};

export const textVariantList = [
  'heading',
  'title',
  'body',
  'button-primary',
  'button-outline',
  'caption',
  'label',
  'caption-01',
  'caption-bold',
];
export type TextVariant =
  | 'heading'
  | 'title'
  | 'body'
  | 'button-primary'
  | 'button-outline'
  | 'caption'
  | 'label'
  | 'caption-01'
  | 'caption-bold';
export const textVariantsList = [
  ,
  'heading',
  'title',
  'body',
  'button-primary',
  'button-outline',
  'caption',
  'label',
  'caption-01',
  'caption-bold',
];
export type TextWeightVariant = 'normal' | 'medium' | 'bold';

export interface TextProps extends TextPropsBase {
  variant: TextVariant;
  weightVariant?: TextWeightVariant;
}