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;