import React, {useEffect} from 'react';

import {StatusBar, useColorScheme} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';

const AppColors = { darker: '#222222', lighter: '#F3F3F3' };
import {VerificationProvider} from './src/provider/verification.context';
import CarouselWrapper from './src/wrapper/carousel-wrapper';
import {FacekiApiResponse} from './src/service/types/facekiresponse';
import {Branding} from './src/service/types/interfaces';
import type {Language} from './src/service/types/interfaces';
import {getBranding, updateBranding} from './src/branding';
export type SlideType = {url: string; heading: string; subHeading: string};
import Toast from 'react-native-toast-message';

type GeoLocation = {
  latitude: number;
  longitude: number;
};

/**
 * An object containing the props for the KYC verification component.
 *
 * @param {string} clientId - The client ID for the KYC verification service.
 * @param {string} clientSecret - The client secret for the KYC verification service.
 * @param {string} logoURL - The URL for the image to display in the footer of the KYC verification process. (optional)
 * @param {string} loadingURL - The URL for the image to display in the loading animation on loading screen. (optional)
 * @param {Array} slides - An array of objects representing the slides to display in the KYC verification process with heading and subHeading. (optional)
 * @param {Function} onError - A function that handles errors that occur during the KYC verification process.
 * @param {Function} onComplete - A function that is called when the KYC verification process is complete.
 */

type props = {
  verification_url: string;
  logoURL?: string;
  loadingURL?: string;
  slides?: SlideType[];
  onError: (message: FacekiApiResponse | Error) => void;
  onComplete: (message: FacekiApiResponse) => void;
  onCancel?: () => void;
  onLivenessError?: (imageBase64: any, response: string) => void;
  skipGuidanceScreens?: boolean;
  consenttermofuseLink?: string;
  skipFirstScreen?: boolean;
  skipResultScreen?: boolean;
  resultContent?: {
    success: {
      heading: string;
      subHeading: string;
    };
    fail: {
      heading: string;
      subHeading: string;
    };
    verification: {
      heading: string;
    };
  };
  branding?: Branding;
  record_identifier?: string;
  language?: Language;
  geo_location?: GeoLocation;
};

function App({
  verification_url,
  logoURL,
  slides,
  onError,
  onComplete,
  onCancel,
  onLivenessError,
  loadingURL,
  skipGuidanceScreens=false,
  consenttermofuseLink,
  skipFirstScreen,
  skipResultScreen,
  resultContent,
  branding,
  record_identifier,
  language = 'en',
  geo_location,
}: props): React.JSX.Element {
  useEffect(() => {
    if (!branding) {
      console.log('Using Default Branding');
      branding = getBranding();
    } else {
      updateBranding(branding);
      console.log('Using Custom Branding');
    }
  }, [branding]);

  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? AppColors.darker : AppColors.lighter,
  };

  return (
    <SafeAreaView style={[backgroundStyle, {flex: 1}]}>
      <VerificationProvider
        onLivenessError={onLivenessError}
        onError={onError}
        onComplete={onComplete}
        onCancel={onCancel}
        skipGuidanceScreens={skipGuidanceScreens}
        consenttermofuseLink={consenttermofuseLink}
        skipFirstScreen={skipFirstScreen}
        skipResultScreen={skipResultScreen}
        resultContent={resultContent}
        branding={branding}
        record_identifier={record_identifier}
        language={language}
        geo_location={geo_location}
        verification_url={verification_url}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <CarouselWrapper
          slides={slides}
          logoURL={logoURL}
          loadingURL={loadingURL}
        />
      </VerificationProvider>
      <Toast />
    </SafeAreaView>
  );
}

export default App;
