"use client";
import React, { useEffect, useMemo, useState } from "react";

import { KYC_STATUS } from "../../constants/app";
import { useUserStore } from "../../stores/userStore";
import { KycStatus } from "../../types/user";
import { KycPendingStatus } from "./KycPendingStatus";
import { KycRejectedStatus } from "./KycRejectedStatus";
import { KycRequiredStatus } from "./KycRequiredStatus";
import { SubscriptionRequiredStatus } from "./SubscriptionRequiredStatus";

type AletaManagerComponentProps = {
  children: any;
};

export function AletaManagerComponent({
  children,
}: AletaManagerComponentProps) {
  const [kycStatus, setKycStatus] = useState<KycStatus | null>(null);

  const { user } = useUserStore();

  // Mock API call to get KYC status
  useEffect(() => {
    if (user && user?.pgUser?.aletaState) {
      (async () => await setKycStatus(user?.pgUser?.aletaState))();
    }
  }, [user]);

  // Use a mapping object instead of switch statement for cleaner code
  const statusComponentMap = useMemo(
    () => ({
      [KYC_STATUS.SUBSCRIPTION_REQUIRED]: <SubscriptionRequiredStatus />,
      [KYC_STATUS.KYC_REQUIRED]: <KycRequiredStatus />,
      [KYC_STATUS.KYC_PENDING]: <KycPendingStatus />,
      [KYC_STATUS.KYC_REJECTED]: <KycRejectedStatus />,
      [KYC_STATUS.ACTIVE]: children,
    }),
    [children],
  );

  // Determine what content to render based on loading, error, and status
  const content = useMemo(() => {
    return kycStatus ? (
      statusComponentMap[kycStatus]
    ) : (
      <div>Unknown status</div>
    );
  }, [kycStatus, statusComponentMap]);

  return <div>{content}</div>;
}
