import React, { type ReactElement } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { AppWrapper, ContentArea } from "../components/components";
import Header from "../components/layouts/Header";
import {
  GlobalLoadingPage,
  LoadingContent,
} from "../components/layouts/Loading";
import { PAYMENT_MODE } from "../helpers/settingsHelper";
import { useStoreState } from "../store";
import { ACCOUNT_TYPE } from "../store/interface/user";
import { PaymentError } from "../components/Payments/PaymentError";
import { PaymentMiss } from "../components/Payments/PaymentMiss";
import { PaymentSuccess } from "../components/Payments/PaymentSuccess";

export function RequireAuth({ children }: { children: ReactElement }) {
  const { uid, loading, orgStatus } = useStoreState(
    (state) => state.user.userDetails
  ) as {
    uid: string;
    loading: boolean;
    orgStatus: string;
  };

  const location = useLocation();
  if (loading) {
    return <GlobalLoadingPage />;
  }

  if (!uid) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  const isEmpty =
    orgStatus === undefined ||
    orgStatus === PAYMENT_MODE.PAYMENT_ERROR ||
    orgStatus === PAYMENT_MODE.PAYMENT_SUCCESS;

  let content;
  switch (orgStatus) {
    case PAYMENT_MODE.ACTIVE:
      content = children;
      break;
    case PAYMENT_MODE.CANCEL:
      content = children;
      break;
    case PAYMENT_MODE.NEW:
      content = <PaymentMiss />;
      break;
    case PAYMENT_MODE.PAYMENT_ERROR:
      content = <PaymentError />;
      break;
    case PAYMENT_MODE.PAYMENT_SUCCESS:
      content = <PaymentSuccess />;
      break;
    default:
      content = <GlobalLoadingPage />;
  }

  return (
    <AppWrapper>
      {/* {!isEmpty ? ( */}
        <>
          <Header />
          <ContentArea>{content}</ContentArea>
        </>
      {/* ) : (
        <GlobalLoadingPage />
      )} */}
    </AppWrapper>
  );
}

export function PaymentFlow({ children }: { children: ReactElement }) {
  const { uid, loading } = useStoreState((state) => state.user.userDetails);
  sessionStorage.setItem("paymentFlow", "true");
  const location = useLocation();
  if (loading) {
    return <GlobalLoadingPage />;
  }
  if (!uid) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return (
    <AppWrapper>
      <Header />
      <ContentArea>{children}</ContentArea>
    </AppWrapper>
  );
}

export function AutoAuth({ children }: { children: ReactElement }) {
  const { uid, loading } = useStoreState((state) => state.user.userDetails);
  const location = useLocation();
  if (loading) {
    return <GlobalLoadingPage />;
  }
  if (uid) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }
  return children;
}

export function SuperAdmin({ children }: { children: ReactElement }) {
  const { uid, loading, orgStatus, accountType } = useStoreState(
    (state) => state.user.userDetails
  );
  let location = useLocation();

  if (loading) {
    return <GlobalLoadingPage />;
  }
  if (!uid) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  if (accountType === ACCOUNT_TYPE.normal) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }

  return (
    <AppWrapper>
      <Header />
      <ContentArea>{!orgStatus ? <PaymentError /> : children}</ContentArea>
    </AppWrapper>
  );
}

export function IsSuperAdmin({ children }: { children: ReactElement }) {
  const { uid, loading, isSuperAdmin } = useStoreState(
    (state) => state.user.userDetails,
  );
  const location = useLocation();

  if (loading) {
    return <GlobalLoadingPage />;
  }

  if (!uid) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (!isSuperAdmin) {
    return <Navigate to="/" replace />;
  }

  return (
    <AppWrapper>
      <Header />
      <ContentArea>{children}</ContentArea>
    </AppWrapper>
  );
}