import React, { useContext } from 'react';
import Loader from '../../shared/components/loader';
import { getTranslations } from '../../shared/utils/localization-util';
import SettingsContext from '../settings-context';
import { buildClassName } from '../../shared/utils/class-util';

interface FooterProps {
  priceText: string | undefined;
  isLoading: boolean;
  isOffer: boolean | undefined;
  roomsIsDisabled: boolean;
  handleBookClick: () => void;
}

const Footer: React.FC<FooterProps> = ({ priceText, isLoading, isOffer, roomsIsDisabled, handleBookClick }) => {
  const { language, alternativeActionText, alternativeAction } = useContext(SettingsContext);
  const translations = getTranslations(language);

  return (
    <div className="booking-product__footer">
      {isLoading ? (
        <Loader loaderText={translations.PRODUCT.LOADING_PRICE} />
      ) : (
        <>
          {priceText && (
            <div className="booking-product__footer-total">
              <div className="booking-product__footer-label">{translations.SHARED.TOTAL_PRICE}</div>
              <div className="booking-product__footer-price">{priceText}</div>
            </div>
          )}
          <div className="booking-product__footer-actions">
            {priceText ? (
              <button
                type="button"
                className={buildClassName(['cta', !roomsIsDisabled && 'cta--disabled'])}
                onClick={handleBookClick}
                disabled={!roomsIsDisabled}>
                {isOffer ? translations.PRODUCT.TO_YOUR_OFFER : translations.PRODUCT.BOOK_NOW}
              </button>
            ) : alternativeActionText && alternativeAction ? (
              <a href="#offer-form" className="cta" onClick={alternativeAction}>
                {alternativeActionText}
              </a>
            ) : (
              <>{translations.PRODUCT.NOT_AVAILABLE}</>
            )}
          </div>
        </>
      )}
    </div>
  );
};

export default Footer;