import useResponsive from '@/hooks/useResponsive';
import { PaymentMethod } from '@/lib/appConstant';
import { getAuthInfo } from '@/lib/redux/features/auth';
import { getIsUpdatingCard, gmoUpdateCard } from '@/lib/redux/features/payment';
import { getViewSettings } from '@/lib/redux/features/serviceAdmin';
import { useAppDispatch, useAppSelector } from '@/lib/redux/hooks';
import { handleUpdateCardVeritrans } from '@/lib/utils';
import { AuthInfo } from '@/types/auth';
import React, { useEffect, useState } from 'react';
import { Button, Spinner } from 'reactstrap';
import { useTranslations } from 'use-intl';
import { showToast } from '../toast/showToast';
import { useMounted } from '@/hooks/useMounted';
import { CreditCardFilled } from '@ant-design/icons';
import InputUpdateCard from '../ui/input/input-update-card';
import { CardDataUpdateType } from '@/types/common';
import AppButton from '../ui/button/app-button';



const UserCardForm = (props: any) => {
  const t = useTranslations("");
  const dispatch = useAppDispatch();
  const mounted = useMounted();
  const { below768 } = useResponsive();
  const [isValidCard, setIsValidCard] = useState(false);
  const [isUpdateCard, setIsUpdateCard] = useState(false);
  const [isDisabled, setIsDisabled] = useState(false);
  const [cardData, setCardData] = useState<CardDataUpdateType>({
    cvc: '',
    expiry: '',
    cardNumber: '',
    focus: ''
  });

  const authUser = useAppSelector(getAuthInfo) || {} as AuthInfo;
  const viewSettings = useAppSelector(getViewSettings);
  const isUpdatingCard = useAppSelector(getIsUpdatingCard);


  const Style: any = {
    spin: {
      height: !below768 ? '100%' : '90%',
      width: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: '1000',
      position: !below768 ? 'relative' : 'absolute'
    }
  };

  useEffect(() => {
    if (authUser && authUser.cardNumber) {
      setIsUpdateCard(false);
    }
  }, [authUser]);

  const handleVeritransUpdateCard = (data: any) => {
    // dispatch(veritransUpdateCard(data));
  }

  const submitCard = () => {
    if (isValidCard && mounted) {
      console.log('here 1');
      const expireSplit = cardData.expiry.replaceAll(' ', '').split('/') || [];
      const Multipayment = window.Multipayment;
      if (authUser && authUser.shopId) {
        console.log(' >>>> shopId: ', authUser.shopId);
        Multipayment.init(authUser.shopId);
        const tokenRequest = {
          cardno: cardData.cardNumber.replaceAll(' ', ''),
          expire: expireSplit[1] + expireSplit[0],
          securitycode: cardData.cvc
        };
        
        Multipayment.getToken(tokenRequest, (response: any) => {
          execPurchase({ ...response });
        });
      }
      if (viewSettings.paymentGateway === PaymentMethod.VERITRANS) {
        setIsDisabled(true);
        const params = {
          cardNumber: cardData.cardNumber.replaceAll(' ', ''),
          cardExpire: cardData.expiry.replaceAll(' ', ''),
          securityCode: cardData.cvc,
          tokenApiKey: authUser.tokenApiKey,
          lang: authUser.lang
        };
        const errorMessage = handleUpdateCardVeritrans(params, handleVeritransUpdateCard);
        if (errorMessage) {
          showToast("error", t(errorMessage));
        }
        setIsDisabled(false);
      }
    } else {
      showToast("error", t('toast.error.creditCardEmpty'));
    }
    setIsUpdateCard(false);
  };

  const execPurchase = (data: any) => {
    console.log('execPurchase: ', data);
    
    const { resultCode, tokenObject = {} } = data;
    const { token } = tokenObject;
    if (resultCode !== '000') {
      showToast("error", t('toast.error.payment'));
    } else {
      dispatch(gmoUpdateCard({ token }));
    }
  };

  const showUpdateCard = () => {
    setCardData({
      cvc: '',
      expiry: '',
      cardNumber: '',
      focus: ''
    });
    setIsValidCard(true);
    setIsUpdateCard(() => true);
  };

  if (isUpdatingCard) {
    return (
      <div style={Style.spin}>
        <Spinner color='primary' /> {t('progress.loading')}
      </div>
    );
  } else {
    return (
      <React.Fragment>
        <div className="row">
          <div className="col-sm-12 col-md-12 py-2">
            {
              (!authUser.cardNumber || isUpdateCard) && 
              <InputUpdateCard setCardData={setCardData} cardData={cardData} setIsValidCard={setIsValidCard}/>
            }
            {
              authUser.cardNumber && <React.Fragment>
                {
                  !isUpdateCard && <div style={{ display: 'flex', width: '100%' }}>
                    <CreditCardFilled  style={{
                      display: 'flex',
                      alignItems: 'center',
                      marginRight: '0.5rem'
                    }}/>
                     {authUser.cardNumber}
                  </div>
                }
              </React.Fragment>
            }
          </div>
          <div className="col-sm-12 col-md-12 py-2">
            {
              isUpdateCard &&
              <AppButton
                type='button'
                className={'btn btn-warning'}
                style={{ margin: '10px 0' }}
                // variant="contained"
                color="warning"
                // type="button"
                onClick={() => {
                  setIsUpdateCard(() => false);
                  setCardData({
                    cvc: '',
                    expiry: '',
                    cardNumber: '',
                    focus: ''
                  });
                  setIsValidCard(true);
                }}
              >
                {t('button.cancel')}
              </AppButton>
            }
            
            <AppButton
              type='button'
              className={'btn btn-info'}
              // style={{ backgroundColor: '#138496', borderColor: '#138496', margin: '10px 0', color: '#fff' }}
              onClick={() => {
                if (!isUpdateCard && authUser.cardNumber) {
                  showUpdateCard();
                } else {
                  submitCard();
                }
              }}
              disabled={isDisabled}
            >
              {t('button.update')}
           </AppButton>
          </div>
        </div>
      </React.Fragment>
    );
  }
};


export default UserCardForm;