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

import { Tag } from '~/components/tag';
import { Text } from '~/components/text';
import { enhanceViewStyle } from '~/utils/styles';

import { TextWithTagProps as Props } from './text-with-tag.props';
import { TextWithTagStyles as styles, EXPANDED } from './text-with-tag.styles';

/**
 * Helper component to get the status tag.
 *
 * @param {boolean} expanded Optional tag's preset.
 * @param {string} tag Optional tag text.
 * @param {string} tagPreset Optional tag's preset.
 * @param {TranslationKey} tagTx Optional tag text key which is looked up via i18n.
 * @param {object} tag Optional tag options to pass to i18n.
 * @param {string} text Optional main text.
 * @param {TranslationKey} textTx Optional text key which is looked up via i18n.
 * @param {object} textTxOptions Optional text options to pass to i18n.
 * @param {ViewStyle} style Optional style override for the root view.
 * @param {ViewStyle} tagStyle Optional style override for the tag component.
 * @param {TextStyle} tagTextStyle Optional style override for the tag's text.
 * @param {TextStyle} textStyle Optional style override for the main text.
 */
export const TextWithTag: React.FC<Props> = (props) => {
  const {
    expanded,
    tag,
    tagPreset,
    tagTx,
    tagTxOptions,
    text,
    textPreset,
    tx,
    txOptions,
    style: styleOverride,
    tagStyle: tagStyleOverride,
    tagTextStyle,
    textStyle,
  } = props;
  const style = enhanceViewStyle([styles.container, styleOverride, expanded ? EXPANDED : null]);
  const tagStyle = enhanceViewStyle([styles.tag, tagStyleOverride]);

  return (
    <View style={style}>
      <Text preset={textPreset} style={textStyle} text={text} tx={tx} txOptions={txOptions} />
      <Tag
        preset={tagPreset}
        style={tagStyle}
        text={tag}
        textStyle={tagTextStyle}
        tx={tagTx}
        txOptions={tagTxOptions}
      />
    </View>
  );
};
