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 { navigate } from "@reach/router";
import { useAppDispatch } from "../../store";
import { selectBookingQueryString, selectTranslations } from "../booking/selectors";

interface ErrorProps {}

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

  const settings = useContext(SettingsContext);
  const bookingQueryString = useSelector(selectBookingQueryString);

  const tryAgainUrl = `${settings.basePath}?${bookingQueryString}`;

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

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

  const translations = useSelector(selectTranslations);  

  return (
    <div className="form">
      <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;