import React, { useContext, useEffect } from 'react';
import { selectBookingNumber, selectBookingQueryString, selectIsOption, selectTranslations } from '../booking/selectors';
import SettingsContext from '../../settings-context';
import { useSelector } from 'react-redux';
import { useAppDispatch } from '../../store';
import { setCurrentStep } from '../booking/booking-slice';
import { OPTIONS_FORM_STEP } from '../booking/constants';
import { useNavigate } from 'react-router';
import SharedConfirmation from '../../../shared/booking/shared-confirmation';

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);
  const translations = useSelector(selectTranslations);

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

  return (
    <SharedConfirmation
      bookingNumber={bookingNumber}
      isOption={isOption}
      isOffer={settings.isOffer}
      translations={translations.CONFIRMATION}
      companyContactPhone={settings.companyContactPhone}
      companyContactEmail={settings.companyContactEmail}
      homeUrl={settings.basePath || '/'}
    />
  );
};

export default Confirmation;