// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { useEffect, useState } from 'react';

import type { LocalizerType } from '../types/Util.js';
import { Modal } from './Modal.js';
import { Button, ButtonVariant } from './Button.js';
import { DAY } from '../util/durations/index.js';

export type PropsType = {
  // Test-only
  _timeout?: number;
  i18n: LocalizerType;
  onCancelDonation: () => unknown;
  onOpenBrowser: () => unknown;
  onTimedOut: () => unknown;
};

export function DonationVerificationModal(props: PropsType): JSX.Element {
  const { _timeout, i18n, onCancelDonation, onOpenBrowser, onTimedOut } = props;
  const [hasOpenedBrowser, setHasOpenedBrowser] = useState(false);

  const titleText = hasOpenedBrowser
    ? i18n('icu:Donations__3dsValidationNeeded--waiting')
    : i18n('icu:Donations__3dsValidationNeeded');
  const openBrowserText = hasOpenedBrowser
    ? i18n('icu:Donations__3dsValidationNeeded__OpenBrowser--opened')
    : i18n('icu:Donations__3dsValidationNeeded__OpenBrowser');

  const footer = (
    <>
      <Button variant={ButtonVariant.Secondary} onClick={onCancelDonation}>
        {i18n('icu:Donations__3dsValidationNeeded__CancelDonation')}
      </Button>
      <Button
        onClick={() => {
          setHasOpenedBrowser(true);
          onOpenBrowser();
        }}
      >
        {openBrowserText}
      </Button>
    </>
  );

  useEffect(() => {
    let timeout: NodeJS.Timeout | undefined = setTimeout(() => {
      timeout = undefined;
      onTimedOut();
    }, _timeout ?? DAY);

    return () => {
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, [_timeout, onTimedOut]);

  return (
    <Modal
      i18n={i18n}
      modalFooter={footer}
      moduleClassName="DonationVerificationModal"
      modalName="DonationVerificationModal"
      noMouseClose
      onClose={onCancelDonation}
      title={titleText}
    >
      {i18n('icu:Donations__3dsValidationNeeded__Description')}
    </Modal>
  );
}