import * as React from 'react';
import { View } from 'react-native';
//TODO
import { Text } from '../../components/text';
import { testIdProps } from '../../../test/utils';
import { enhanceTextStyle, enhanceViewStyle } from '../../utils/styles';

import { messagePresets, titlePresets, viewPresets } from './feedback-bar.presets';
import { FeedbackBarProps as Props } from './feedback-bar.props';

/**
 * Component to show a feedback message.
 *
 * @param preset One of the different types of presets.
 * @param title An optional title to display if not using `tx` or nested components.
 * @param titleTx An optional title which is looked up via i18n.
 * @param titleStyle An optional title style override useful for padding & margin.
 * @param message An optional message to display if not using `tx` or nested components.
 * @param messageTx An optional message which is looked up via i18n.
 * @param messageStyle An optional message style for message text display override.
 * @param style An optional root style override useful for padding & margin.
 */
export const FeedbackBar: React.FC<Props> = (props) => {
  // grab the props
  const {
    titleTx,
    title,
    messageTx,
    message,
    icon,
    preset,
    style: styleOverride,
    titleStyle: titleStyleOverride,
    messageStyle: messageStyleOverride,
  } = props;
  const viewStyle = enhanceViewStyle([viewPresets[preset], styleOverride]);
  const titleStyle = enhanceTextStyle([titlePresets[preset], titleStyleOverride]);
  const messageStyle = enhanceTextStyle([messagePresets[preset], messageStyleOverride]);
  const isMessage = !!messageTx || !!message;

  return (
    <View style={viewStyle}>
      <View>
        <Text
          boldType="bold"
          preset="caption"
          style={titleStyle}
          text={title}
          tx={titleTx}
          {...testIdProps('feedback-bar-text')}
        />
        {isMessage && <Text preset="caption" style={messageStyle} text={message} tx={messageTx} />}
      </View>
      {icon}
    </View>
  );
};

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