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

import Message from '../../components/message';
import SettingsContext from '../../settings-context';
import { useSelector } from 'react-redux';
import Icon from '../../../shared/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';
import { useNavigate } from 'react-router';
import { book } from '@qite/tide-client';

interface ConfirmationProps {}

const Confirmation: React.FC<ConfirmationProps> = () => {
  const dispatch = useAppDispatch();
  const settings = useContext(SettingsContext);
  const navigate = settings.skipRouter ? () => {} : useNavigate();

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

  useEffect(() => {
    if (!bookingNumber) {
      if (settings.skipRouter) {
        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
      } else {
        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.error.pathSuffix}?${bookingQueryString}`);
      }
    }
  }, [bookingNumber]);

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

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

  return (
    <div className="form form__booking--message" 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>
              }>
              {!isOption ? (
                <>
                  <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>
                </>
              ) : undefined}
            </Message>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Confirmation;