import {
  CustomBottomSheet,
  CustomBottomSheetHandle,
  CustomBottomSheetProps,
  CustomBottomSheetTitle,
} from "ayasofyazilim-mobile-ui";
import { ParseResult } from "mrz";
import React, { forwardRef } from "react";
import { PassportScanner } from "./PassportScanner";
import { View } from "react-native";
import { Portal } from "@gorhom/portal";

interface PassportScannerWithDrawerProps {
  handlePassportScanned: (mrzResult: ParseResult) => void;
  isProcessingPassport: boolean;
  title: string;
  subTitle: string;
  alignMrzText: string;
  tryAgainText: string;
  analyzingText: string;
}

export const PassportScannerWithDrawer = forwardRef<
  CustomBottomSheetHandle,
  Omit<CustomBottomSheetProps, "children" | "snapPoints"> &
    PassportScannerWithDrawerProps
>((props, ref) => {
  const handlePassportScannedWithClose = (mrzResult: ParseResult) => {
    props.handlePassportScanned(mrzResult);
  };

  return (
    <Portal>
      <CustomBottomSheet ref={ref} {...props} snapPoints={["100%"]}>
        <CustomBottomSheetTitle
          title={props.title}
          subTitle={props.subTitle}
        />
        <View className="bg-white flex-1">
          <View className="bg-black mx-2 mb-2 pb-2 rounded-lg flex-1">
            <PassportScanner
              alignMrzText={props.alignMrzText}
              tryAgainText={props.tryAgainText}
              handlePassportScanned={handlePassportScannedWithClose}
              isProcessingPassport={props.isProcessingPassport}
              analyzingText={props.analyzingText}
            />
          </View>
        </View>
      </CustomBottomSheet>
    </Portal>
  );
});