@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/Notification.js

// @flow

import * as React from 'react';
import { Alert } from '@kiwicom/orbit-components';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import { formatCountDown } from '../../helpers/dateUtils';

type Props = {|
  isUrgent: boolean,
  hoursLeft: number,
|};

const Notification = ({ isUrgent, hoursLeft }: Props) => {
  const formattedTime = formatCountDown({ hoursLeft });
  const type = isUrgent ? 'warning' : 'info';

  return (
    <div className="notification">
      <Alert type={type} icon>
        {(() => {
          switch (formattedTime.format) {
            case 'days':
              return isUrgent ? (
                <Translate
                  t="smartfaq.single_booking_page.notification.urgent_message.days"
                  values={{ daysLeft: formattedTime.daysLeft }}
                />
              ) : (
                <Translate
                  t="smartfaq.single_booking_page.notification.normal_message.days"
                  values={{ daysLeft: formattedTime.daysLeft }}
                />
              );

            case 'hours':
              return isUrgent ? (
                <Translate
                  t="smartfaq.single_booking_page.notification.urgent_message.hours"
                  values={{ hoursLeft: formattedTime.hoursLeft }}
                />
              ) : (
                <Translate
                  t="smartfaq.single_booking_page.notification.normal_message.hours"
                  values={{ hoursLeft: formattedTime.hoursLeft }}
                />
              );

            case 'hours_minutes':
              return isUrgent ? (
                <Translate
                  t="smartfaq.single_booking_page.notification.urgent_message.hours_minutes"
                  values={{
                    hoursLeft: formattedTime.hoursLeft,
                    minutesLeft: formattedTime.minutesLeft,
                  }}
                />
              ) : (
                <Translate
                  t="smartfaq.single_booking_page.notification.normal_message.hours_minutes"
                  values={{
                    hoursLeft: formattedTime.hoursLeft,
                    minutesLeft: formattedTime.minutesLeft,
                  }}
                />
              );
            default:
              return null;
          }
        })()}
      </Alert>
      <style jsx>
        {`
          .notification {
            margin-bottom: 24px;
          }
        `}
      </style>
    </div>
  );
};

export const RawNotification = Notification;

export default Notification;