import React from 'react';
import Icon from '../components/icon';
import Message from '../../booking-wizard/components/message';

export interface SharedConfirmationTranslations {
  MAIL_SUBJECT: string;
  TITLE_TEXT_OPTION: string;
  TITLE_TEXT_OFFER: string;
  TITLE_TEXT_BOOKING: string;
  MESSAGE_TEXT1: string;
  MESSAGE_TEXT2_OFFER: string;
  MESSAGE_TEXT2_BOOKING: string;
  QUESTIONS_TEXT1: string;
  QUESTIONS_TEXT2: string;
  QUESTIONS_TEXT3: string;
  QUESTIONS_ALT: string;
}

export interface SharedConfirmationProps {
  bookingNumber?: string;
  isOption?: boolean;
  isOffer?: boolean;
  translations: SharedConfirmationTranslations;
  companyContactPhone?: string;
  companyContactEmail?: string;
  homeUrl?: string;
}

function format(str: string, args: (string | number | undefined)[]): string {
  // Simple format function: replaces {0}, {1}, ... with args
  return str.replace(/\{(\d+)\}/g, (match, number) => (typeof args[number] !== 'undefined' ? String(args[number]) : match));
}

const SharedConfirmation: React.FC<SharedConfirmationProps> = ({
  bookingNumber,
  isOption,
  isOffer,
  translations,
  companyContactPhone,
  companyContactEmail,
  homeUrl = '/'
}) => {
  const encodedMailSubject = encodeURI(translations.MAIL_SUBJECT);
  const titleText = isOption
    ? format(translations.TITLE_TEXT_OPTION, [bookingNumber])
    : isOffer
    ? format(translations.TITLE_TEXT_OFFER, [bookingNumber])
    : format(translations.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={
                companyContactPhone || companyContactEmail ? (
                  <div className="sm">
                    {companyContactPhone && (
                      <a href={`tel://${companyContactPhone}`} className="sm__icon">
                        <Icon name="tel" />
                      </a>
                    )}
                    {companyContactEmail && (
                      <a href={`mailto://${companyContactEmail}`} className="sm__icon">
                        <Icon name="mail" />
                      </a>
                    )}
                    {homeUrl && (
                      <a href={homeUrl} className="sm__icon">
                        <Icon name="home" />
                      </a>
                    )}
                  </div>
                ) : undefined
              }>
              {!isOption ? (
                <>
                  <p>
                    {translations.MESSAGE_TEXT1}
                    <br />
                    {isOffer ? translations.MESSAGE_TEXT2_OFFER : translations.MESSAGE_TEXT2_BOOKING}
                  </p>
                  {companyContactEmail && (
                    <p>
                      {translations.QUESTIONS_TEXT1}{' '}
                      <a href={`mailto:${companyContactEmail}?subject=${encodedMailSubject}`} title={translations.QUESTIONS_ALT}>
                        {translations.QUESTIONS_TEXT2}
                      </a>
                      {translations.QUESTIONS_TEXT3}
                    </p>
                  )}
                </>
              ) : undefined}
            </Message>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SharedConfirmation;