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

export default function PaymentForm({confToken, reUrl, onComplete}) {
  const paymentFormRef = useRef(true);
  const [isLoading, setIsLoading ] = useState(true)
  
  useEffect(() => {
    
    if (paymentFormRef.current) {
      const script = document.createElement('script');
      script.src = 'https://yookassa.ru/checkout-widget/v1/checkout-widget.js';
      script.async = true;
      script.onload = initializeWidget;
      document.head.appendChild(script);
      paymentFormRef.current = false
      return () => {
        document.head.removeChild(script);
      };
    }
   
  }, []);


  const initializeWidget = () => {
    setIsLoading(false)
    const checkout = new window.YooMoneyCheckoutWidget({
      confirmation_token: confToken,
      error_callback: function (error) {
        console.log(error);
      }
    });
    checkout.on('complete', () => {
      onComplete()
      checkout.destroy()
    })

    checkout.render('payment-form');
  };


  return (
    <div>
      <div id="payment-form"/>
    </div>
  );
}