import styled from 'styled-components/native';
import { Text } from 'react-native';
import { typography /*, background */, position, space } from 'styled-system';
import React, { PureComponent } from 'react';
import {
  themeColor,
  themeFont,
  fontSizeMixin,
  fontTransformMixin,
} from '../s-mixins';

/*
 * 1. Typography
 * https://styled-system.com/api/#typography
 * fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, fontStyle
 * */

/*
 * 3. Background
 * https://styled-system.com/api/#background
 * backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat
 * */

// @ts-ignore
const StyledText: any = styled<any>(Text)`
  ${themeFont};
  ${themeColor};
  ${typography};
  ${position};
  ${space};
  ${fontSizeMixin};
  ${fontTransformMixin}
`;

export class SText extends PureComponent<any> {
  render() {
    const { children, ...rest } = this.props;
    return (
      <StyledText allowFontScaling={false} {...rest}>
        {children}
      </StyledText>
    );
  }
}