import * as React from 'react';
import { View } from 'react-native';

import { Text } from '~/components/text';
import { enhanceTextStyle, enhanceViewStyle } from '~/utils/styles';

import { textPresets, viewPresets } from './tag.presets';
import { TagProps } from './tag.props';
import { tagStyles as styles } from './tag.styles';

/**
 * Tag component that shows a text within preset views.
 *
 * @param {Presets} preset Optional type of presets.
 * @param {string} text Optional text to display if not using `tx` or nested components.
 * @param {string} tx Optional text key which is looked up via i18n.
 * @param {string} txOptions Optional options to pass to i18n.
 * @param {ViewStyle} style Optional style override for the root view.
 * @param {ViewStyle} textStyle Optional style override for the text.
 */
export const Tag: React.FC<TagProps> = (props) => {
  const { preset, text, tx, txOptions, style: styleOverride, textStyle: textStyleOverride } = props;
  const style = enhanceViewStyle([styles.container, viewPresets[preset], styleOverride]);
  const textStyle = enhanceTextStyle([textPresets[preset], textStyleOverride]);

  return (
    <View style={style}>
      <Text preset="overline" style={textStyle} text={text} tx={tx} txOptions={txOptions} />
    </View>
  );
};

Tag.defaultProps = {
  preset: 'primary',
};
