import { withReduxStore } from '../../../helpers/store/helpers';
import { ActivityIndicator } from 'react-native';
import React, { useRef } from 'react';
import { WebComponent } from '../../../webComponent/WebComponent';
import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
import UnitAddToWalletButtonView from '../UnitAddToWalletButton';
import WebView from 'react-native-webview';
import { useDispatch } from 'react-redux';
import {
  getStylesObject,
} from './UNAddToWalletBottomSheetItem.styles';
import { useCardWallet } from '../../../helpers/pushProvisioningService/hooks/useCardWallet';
import { getAddToWalletParams, getAddToWalletWindowParams } from './UNAddToWalletComponent.utils';
import { WebViewMessage } from '../../../messages/webMessages';
import { UnitMessage } from '../../../messages/webMessages/unitMessages';
import { injectHtmlFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.utils';
import { setEvent } from '../../../slices/SharedEventsSlice';
import {
  overFullScreenHeight,
} from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
import { PageMessage } from '../../../messages/webMessages/pageMessage';
import { UNBaseView } from '../../UNBaseView';

export interface UNAddToWalletComponentProps {
  customerToken: string;
  cardId: string;
}

const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
  const dispatch = useDispatch();
  const webRef = useRef<WebView>(null);
  const { currentUNWallet } = useCardWallet(props.cardId);
  const styles = getStylesObject();

  const shouldRenderAddToWalletWebView = () => {
    return currentUNWallet &&
      (currentUNWallet.status === UNCardAddToWalletStatus.readyToProvisioning ||
        currentUNWallet.status === UNCardAddToWalletStatus.addedToWallet);
  };
  const handleAddToWalletClicked = () => {
    if (!currentUNWallet) return;
    launchStartCardProvisioning(currentUNWallet);
  };

  const handleWebViewMessage = (message: WebViewMessage) => {
    if (!message || !message.type) return;
    switch (message.type) {
      case PageMessage.PAGE_LOADED:
        injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
        break;
      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
        dispatch(setEvent({
          key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
          data: {},
        }));
        break;
      default:
        break;
    }
  };
  const renderAddToWalletWebView = () => {
    if (currentUNWallet == undefined || currentUNWallet?.status === UNCardAddToWalletStatus.pending) {
      return <ActivityIndicator style={styles.loader} />;
    }
    return (
      <UNBaseView style={{flex: 1}}>
        {
          shouldRenderAddToWalletWebView() &&
            <WebComponent
              ref={webRef}
              type={WebComponentType.cardAction}
              presentationMode={PresentationMode.CoverInjectedHeight}
              params={getAddToWalletParams(props)}
              isScrollable={false}
              onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
              windowParams={getAddToWalletWindowParams(currentUNWallet)}
            />
        }

        {
          currentUNWallet?.status === UNCardAddToWalletStatus.readyToProvisioning &&
          <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />
        }
      </UNBaseView>
    );
  };
  return (
    renderAddToWalletWebView()
  );
};

export default withReduxStore<UNAddToWalletComponentProps>(UNAddToWalletComponent);