import React, { useContext } from "react";
import {
  selectBookingNumber,
  selectBookingQueryString,
  selectTranslations,
} from "../booking/selectors";

import Message from "../../components/message";
import SettingsContext from "../../settings-context";
import { navigate } from "@reach/router";
import { useSelector } from "react-redux";
import Icon from "../../components/icon";
import { useAppDispatch } from "../../store";
import { setCurrentStep } from "../booking/booking-slice";
import { OPTIONS_FORM_STEP } from "../booking/constants";
import { format } from "../../../shared/utils/localization-util";

interface ConfirmationProps { }

const Confirmation: React.FC<ConfirmationProps> = () => {
  const dispatch = useAppDispatch();
  const settings = useContext(SettingsContext);

  const bookingNumber = useSelector(selectBookingNumber);
  const bookingQueryString = useSelector(selectBookingQueryString);

  if (!bookingNumber) {
    if (settings.skipRouter) {
      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
    } else {
      navigate(
        `${settings.basePath}${settings.error.pathSuffix}?${bookingQueryString}`
      );
    }
  }

  const translations = useSelector(selectTranslations);
  const encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);

  const titleText = settings.isOffer
    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber])

  return (
    <div className="form" id="booking--confirmation">
      <div className="form__region">
        <div className="form__row">
          <div className="form__group">
            <Message
              type="success"
              title={titleText}
              actionComponent={
                <div className="sm">
                  <a
                    href={`tel://${settings.companyContactPhone}`}
                    className="sm__icon"
                  >
                    <Icon name="tel" />
                  </a>
                  <a
                    href={`mailto://${settings.companyContactEmail}`}
                    className="sm__icon"
                  >
                    <Icon name="mail" />
                  </a>
                  <a href="/" className="sm__icon">
                    <Icon name="home" />
                  </a>
                </div>
              }
            >
              <p>
                {translations.CONFIRMATION.MESSAGE_TEXT1}
                <br />
                {settings.isOffer ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING}
              </p>
              <p>
                {translations.CONFIRMATION.QUESTIONS_TEXT1} <a
                  href={`mailto:${settings.companyContactEmail}?subject=${encodedMailSubject}`}
                  title={translations.CONFIRMATION.QUESTIONS_ALT}
                >
                  {translations.CONFIRMATION.QUESTIONS_TEXT2}
                </a>
                {translations.CONFIRMATION.QUESTIONS_TEXT3}
              </p>
            </Message>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Confirmation;