import Message from '../../components/message';
import React from 'react';
import SettingsContext from '../../settings-context';
import { setIsRetry } from '../booking/booking-slice';
import { useContext } from 'react';
import { useSelector } from 'react-redux';
import { useAppDispatch } from '../../store';
import { selectBookingQueryString, selectTranslations } from '../booking/selectors';
import { useNavigate } from 'react-router-dom';

interface ErrorProps {}

const Error: React.FC<ErrorProps> = () => {
  const dispatch = useAppDispatch();

  const settings = useContext(SettingsContext);
  const navigate = settings.skipRouter ? () => {} : useNavigate();

  const bookingQueryString = useSelector(selectBookingQueryString);

  const tryAgainUrl = `${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`;

  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
    e.preventDefault();

    if (settings.skipRouter) {
      if (window !== undefined) {
        window.location.reload();
      }
    } else {
      dispatch(setIsRetry(true));
      navigate(tryAgainUrl);
    }
  };

  const translations = useSelector(selectTranslations);

  return (
    <div className="form form__booking--message">
      <div className="form__region">
        <div className="form__row">
          <div className="form__group">
            <Message
              type="error"
              title="Er liep iets mis..."
              actionComponent={
                <a onClick={handleClick} title={translations.ERROR.TRY_AGAIN} className="cta">
                  {translations.ERROR.TRY_AGAIN}
                </a>
              }>
              <p>
                {translations.ERROR.MESSAGE_TEXT1}
                <br />
                {translations.ERROR.MESSAGE_TEXT2}
              </p>
              <p>
                {translations.ERROR.ERROR_TEXT1}
                <a href={`mailto:${settings.companyContactEmail}?subject=Boeking%20mislukt`} title={translations.ERROR.ERROR_ALT}>
                  {translations.ERROR.ERROR_TEXT2}
                </a>
                {translations.ERROR.ERROR_TEXT3}
              </p>
            </Message>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Error;