import React, { useState } from 'react';
import { Modal, Button, LoaderSpinner } from '@akinon/next/components';
import type { LinkModalProps } from '../types/custom-render.types';
import { useAppSelector } from '@akinon/next/redux/hooks';
import mpBlackLogo from '../assets/img/masterpass-black-logo.png';

const LinkModal: React.FC<LinkModalProps> = ({
  open,
  onClose,
  onConfirm,
  texts
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const { tokenData } = useAppSelector((state) => state.masterpassRest);

  const handleConfirm = async () => {
    setIsLoading(true);
    await onConfirm();
  };

  return (
    <Modal
      portalId="masterpass-link-modal"
      open={open}
      setOpen={onClose}
      title={
        <img src={mpBlackLogo.src} alt="Masterpass" className="w-36 h-auto" />
      }
      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
    >
      <div className="py-4 px-6 flex flex-col items-center gap-2">
        <p className="text-center text-lg">
          {texts.linkModalDescription.replace(
            'PHONE_NUMBER',
            `+${tokenData?.AccountKey}`
          )}
        </p>
        <a
          className="block text-center underline"
          target="_blank"
          href="https://www.mastercard.com.tr/tr-tr/tuketiciler/odeme-secenekleri/masterpass.html"
          rel="noopener noreferrer"
        >
          {texts.whatIsMasterpassLink}
        </a>
        <div className="flex flex-col gap-2 w-3/4 m-auto">
          <Button
            className="py-3 h-auto"
            onClick={handleConfirm}
            disabled={isLoading}
          >
            {isLoading ? (
              <LoaderSpinner className="w-4 h-4" />
            ) : (
              texts.linkAccountButton
            )}
          </Button>
          <Button
            appearance="outlined"
            className="underline px-5 py-3 h-auto"
            onClick={onClose}
            disabled={isLoading}
          >
            {texts.linkModalCancelButton}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default LinkModal;