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 './chip.presets';
import { ChipProps } from './chip.props';
import { chipStyles as styles } from './chip.styles';

/**
 * Chip 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 {TextStyle} textStyle Optional style override for the text.
 */
export const Chip: React.FC<ChipProps> = (props) => {
  const {
    preset,
    noFill,
    text,
    tx,
    txOptions,
    style: styleOverride,
    textStyle: textStyleOverride,
  } = props;
  const style = enhanceViewStyle([
    styles.container,
    viewPresets[preset],
    styleOverride,
    noFill ? { backgroundColor: 'transparent' } : {},
  ]);
  const textStyle = enhanceTextStyle([styles.text, textPresets[preset], textStyleOverride]);

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

Chip.defaultProps = {
  preset: 'primary',
  noFill: false,
};
