import { FC, ReactNode, useState } from 'react';
import { StyleProp, TextStyle, ViewStyle } from 'react-native';
import { useFetchCardMetadata } from '../hooks/useFetchCardMetadata';
import { CardCover, CardCoverProps } from './CardCover';
import { ExperienceModal, ExperienceModalProps } from './ExperienceModal';

type OwnProps = {
  /**
   * Override the button style.
   */
  buttonStyle?: StyleProp<ViewStyle>;

  /**
   * Override the button text style.
   */
  buttonTextStyle?: StyleProp<TextStyle>;

  /**
   * Override the default loader for the cover.
   */
  coverLoader?: ReactNode;

  /**
   * Override the default error display for the cover.
   */
  coverErrorDisplay?: ReactNode;

  /**
   * The URL of the embed metadata for the card, copied from the Komo Portal.
   */
  embedMetaUrl: string;

  /**
   * The callback for when an error occurs during querying the embed metadata endpoint.
   */
  onError?: (e: any) => void;

  /**
   * The callback for when the modal is closed.
   */
  onModalClose?: () => void;

  /**
   * The callback for when the modal is opened.
   */
  onModalOpen?: () => void;

  /**
   * Override the default error display for the modal.
   */
  modalErrorDisplay?: ExperienceModalProps['errorDisplay'];
};

export type KomoCardWidgetProps = OwnProps &
  Pick<
    CardCoverProps,
    'containerStyle' | 'coverImageStyle' | 'hideCoverButton'
  > &
  Pick<
    ExperienceModalProps,
    | 'appId'
    | 'modalHeader'
    | 'shareClickUrl'
    | 'formPrefillValues'
    | 'extensionDataValues'
    | 'authPassthroughParams'
    | 'webViewProps'
    | 'iframeProps'
    | 'onFileDownload'
    | 'onKomoEvent'
    | 'onWindowMessage'
    | 'loadingTimeoutMs'
  >;

export const KomoCardWidget: FC<KomoCardWidgetProps> = ({
  appId,
  buttonStyle,
  buttonTextStyle,
  containerStyle,
  coverImageStyle,
  coverLoader,
  coverErrorDisplay,
  embedMetaUrl,
  modalHeader,
  onError,
  onModalClose,
  onModalOpen,
  shareClickUrl,
  formPrefillValues,
  extensionDataValues,
  hideCoverButton = false,
  onFileDownload,
  onKomoEvent,
  onWindowMessage,
  webViewProps,
  iframeProps,
  authPassthroughParams,
  loadingTimeoutMs,
  modalErrorDisplay,
}) => {
  const [modalOpen, setModalOpen] = useState(false);
  const { data, isLoading, isError } = useFetchCardMetadata({
    embedMetaUrl,
    onError,
  });

  return (
    <>
      <CardCover
        onClick={() => {
          if (isLoading || isError || !data) {
            return;
          }
          setModalOpen(true);
          onModalOpen?.();
        }}
        containerStyle={containerStyle}
        coverImageStyle={coverImageStyle}
        imageUrl={data?.imageUrl}
        imageAspectRatio={data?.imageAspectRatio}
        metaButtonStyle={data?.buttonStyle}
        overrideButtonStyle={buttonStyle}
        overrideButtonTextStyle={buttonTextStyle}
        hideCoverButton={hideCoverButton}
        isLoading={isLoading}
        loader={coverLoader}
        isError={isError}
        errorDisplay={coverErrorDisplay}
      />
      <ExperienceModal
        embedUrl={data?.embedUrl}
        embedAuthUrl={data?.embedAuthUrl}
        authPassthroughParams={authPassthroughParams}
        onClose={() => {
          setModalOpen(false);
          onModalClose?.();
        }}
        isOpen={modalOpen}
        modalHeader={modalHeader}
        shareClickUrl={shareClickUrl}
        appId={appId}
        formPrefillValues={formPrefillValues}
        extensionDataValues={extensionDataValues}
        onFileDownload={onFileDownload}
        onKomoEvent={onKomoEvent}
        onWindowMessage={onWindowMessage}
        webViewProps={webViewProps}
        iframeProps={iframeProps} 
        loadingTimeoutMs={loadingTimeoutMs}
        errorDisplay={modalErrorDisplay}
      />
    </>
  );
};