import * as React from 'react';

import { FadeInOutAnimation } from '../../../components/animations';
import { timing } from '../../../theme';

import { FeedbackBar } from '../feedback-bar';

import { Props } from './feedback-fading-bar.props';

/**
 * Component to show a feedback message.
 *
 * @param titleTx Title which is looked up via i18n.
 * @param title The title to display if not using `tx` or nested components.
 * @param preset  One of the different types of presets.
 * @param style An optional style override useful for padding & margin.
 * @param textStyle An optional style override useful for padding & margin.
 */
export const FeedbackFadingBar: React.FC<Props> = (props) => {
  // grab the props
  const {
    titleTx,
    title,
    messageTx,
    message,
    icon,
    duration,
    visibleTime,
    onAnimationEnd,
    preset,
    style,
    titleStyle,
    barStyle,
  } = props;

  return (
    <FadeInOutAnimation
      duration={duration}
      style={style}
      visibleTime={visibleTime}
      onAnimationEnd={onAnimationEnd}
    >
      <FeedbackBar
        icon={icon}
        message={message}
        messageTx={messageTx}
        preset={preset}
        style={barStyle}
        title={title}
        titleStyle={titleStyle}
        titleTx={titleTx}
      />
    </FadeInOutAnimation>
  );
};

FeedbackFadingBar.defaultProps = {
  preset: 'primary',
  duration: timing[2],
  visibleTime: timing[4],
};
