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;