import { Trans } from 'react-i18next';
import React from 'react';
import type { TextProps as RNTextProps } from 'react-native';
import { Text, TextProps } from '../Text';
import type { Theme } from '../../theme/theme';
import './i18n';

type AllTextProps = TextProps<Theme> & RNTextProps;

interface ITransText extends AllTextProps {
  i18nKey: string;
  defaultValue?: string;
  values?: Record<string, unknown>;
  childrenProps?: AllTextProps;
}

/**
 * Return an `Text` component with the `i18nKey` translated.
 * @i18nKey - i18n key
 * @values - values to be replaced in i18n keys
 * @defaultValue - default value to be shown if i18n key is not found
 * @childrenProps - props to be passed to Trans children component
 * @example
 *  <TransWithFormat
      defaultValue="Acepto los <1>{{terms}}</1>"
      i18nKey="termsConditions.register.firstCheckbox.title"
      values={{
        terms: t('termsConditions.acceptTerms.firstCheckbox.title'),
      }}
      childrenProps={{
        textDecorationLine: 'underline',
        onPress: () => null,
      }}
      {textProps}
    />
 **/
export const TransWithFormat = ({
  i18nKey,
  defaultValue,
  values,
  childrenProps,
  ...textParams
}: ITransText) => {
  return (
    <Text {...textParams} testID="textTranslateFormat">
      <Trans
        defaults={defaultValue}
        i18nKey={i18nKey}
        values={values}
        components={{
          bold: (
            <Text
              fontWeight={childrenProps?.fontWeight ?? 'bold'}
              {...childrenProps}
            />
          ),
          1: <Text fontWeight="bold" {...childrenProps} />,
        }}
      />
    </Text>
  );
};