import React, { useState, useEffect, Fragment } from 'react';

var VerifyUserComponent = function(props) {
    // Destructuring and initializing variables
    let onSuccessCallback = props.onSuccess;
    let {
        open: isOpen,
        loading: isLoading,
        error: hasError,
        securities: userSecurities,
        ready: isReady,
        hasFetchedSecurities: securitiesFetched,
        fetchingSecurities: isFetchingSecurities
    } = useAuthContext();

    const [isVerified, setVerified] = useState(false); // Boolean state to track if user is verified
    const isGme = props.isGme; // Boolean to check if it's GME

    // Default onSuccess callback if not provided
    if (!props.onSuccess) {
        onSuccessCallback = e => {
            console.log("Phone number confirmed", e);
        };
    }

    // State variables
    const [currentStage, setCurrentStage] = useState("initial"); // String state for current process stage
    const [errorMessage, setErrorMessage] = useState(null); // Error state
    const authContext = useAuthContext(); // Custom hook or context
    const [isModalOpen, setModalOpen] = useState(false); // Boolean state for modal toggle

    // Some date-related calculation
    const yearsUntil2103 = function() {
        let futureDate = new Date(2103, 9, 8);
        let currentDate = new Date();
        return calculateYears({
            start: currentDate,
            end: futureDate
        }).years + " years";
    }();

    // Effects
    useEffect(() => {
        if (!authContext.authenticated && (isModalOpen || setCurrentStage("initial"))) {
            // Do something when not authenticated
        }
    }, [isModalOpen, authContext.authenticated]);

    useEffect(() => {
        if (authContext.authenticated) {
            let userPhone;
            onSuccessCallback && onSuccessCallback((userPhone = authContext.user?.phone?.number) ?? "");
            setCurrentStage("success");
        }
    }, [authContext.authenticated]);

    useEffect(() => {
        if (isGme && !isLoading && !hasError && securitiesFetched) {
            setModalOpen(true);
            setCurrentStage("gme");
            if (userSecurities.length > 0) {
                userSecurities.forEach(security => {
                    if (security.ticker_symbol === "GME") setVerified(true);
                });
            }
        }
    }, [isReady, isLoading, hasError, userSecurities, isGme, securitiesFetched]);

    // Render switch case based on state `currentStage`
    let content;
    switch (currentStage) {
        case "initial":
        case "login":
            content = <LoginComponent
                onSuccess={() => setCurrentStage("code")}
                onError={e => {
                    setCurrentStage("error");
                    setErrorMessage(e);
                }}
            />;
            break;
        case "code":
            content = <VerificationCodeComponent
                onSuccess={() => {
                    let userPhone;
                    setCurrentStage("success");
                    onSuccessCallback && onSuccessCallback((userPhone = authContext.user?.phone?.number) ?? "");
                }}
                onError={e => {
                    setCurrentStage("error");
                    setErrorMessage(e);
                }}
            />;
            break;
        case "error":
            content = (
                <div className="flex flex-col gap-4 text-center w-full">
                    <TextComponent
                        variant="body05"
                        className="text-red-700"
                    >
                        Something went wrong, please try again...
                    </TextComponent>
                    <TextComponent
                        variant="body06"
                        className="text-red-700"
                    >
                        {errorMessage?.message}
                    </TextComponent>
                </div>
            );
            break;
        case "success":
            content = (
                <div className="flex flex-col gap-4 text-center">
                    <TextComponent variant="body05">
                        CONFIRMED
                    </TextComponent>
                    <TextComponent variant="body05">
                        YOU ARE ON THE LIST. WE WILL TEXT YOU IN {yearsUntil2103}.
                    </TextComponent>
                    {isGme && (
                        <ButtonComponent
                            onClick={() => {
                                setModalOpen(false);
                                isOpen();
                            }}
                            disabled={!isReady || isLoading}
                        />
                    )}
                </div>
            );
            break;
        case "gme":
            content = (
                <div className="flex flex-col gap-4 text-center w-full">
                    {isVerified ? (
                        <Fragment>
                            <TextComponent variant="body05">
                                VERIFIED HOLDER
                            </TextComponent>
                            <TextComponent
                                variant="body05"
                                className="text-[32px] text-[#FF0000] animate-dot-blink"
                            >
                                GAMESTOP CORPORATION ORDINARY SHARES CLASS A - GME
                            </TextComponent>
                            <TextComponent variant="body05">
                                YOU ARE ON THE LIST FOR REAL NOW.
                            </TextComponent>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <TextComponent variant="body05">
                                NOT A HOLDER
                            </TextComponent>
                            <TextComponent
                                variant="body05"
                                className="text-lg"
                            >
                                0 GAMESTOP CORPORATION ORDINARY SHARES CLASS A - GME FOUND
                            </TextComponent>
                            <TextComponent variant="body05">
                                WE WILL TEXT YOU IN {yearsUntil2103}. GOODBYE.
                            </TextComponent>
                        </Fragment>
                    )}
                </div>
            );
            break;
        default:
            content = (
                <TextComponent
                    variant="body05"
                    className="text-center"
                >
                    Loading...
                </TextComponent>
            );
    }

    // Conditional rendering based on `isGme` prop
    let verifyButton = props.isGme ? (
        isFetchingSecurities && !securitiesFetched ? (
            <TextComponent
                variant="body05"
                className="cursor-pointer"
            >
                VERIFYING...
            </TextComponent>
        ) : (
            <TextComponent
                variant="body05"
                className="cursor-pointer"
            >
                ENTER THE{" "}
                <TextComponent
                    variant="body05"
                    className="text-[#FF0000]"
                >
                    CHAMBER
                </TextComponent>
            </TextComponent>
        )
    ) : (
        <TextComponent
            variant="body05"
            className="cursor-pointer"
        >
            ENTER THE CHAMBER
        </TextComponent>
    );

    // Main component return
    return (
        <ModalComponent
            open={isModalOpen}
            onOpenChange={e => {
                setModalOpen(e);
            }}
        >
            <ModalTrigger asChild={true}>
                <Button
                    variant="outline"
                    className="focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent border-black px-24 hover:bg-transparent"
                    onClick={() => trackEvent("EnterChamber")}
                >
                    {verifyButton}
                </Button>
            </ModalTrigger>
            <ModalContent className="h-full flex items-center justify-center max-w-full py-6 px-6 md:py-12 md:px-12 bg-transparent border-none shadow-none">
                {authContext.ready ? (
                    <div className="max-w-[450px] w-[450px] md:w-[525px] md:max-w-[525px]">
                        {content}
                    </div>
                ) : (
                    <div className="self-center space-y-2 grow flex flex-col align-middle justify-center gap-2">
                        <LoadingPlaceholder className="h-4 w-[250px] mx-auto" />
                        <LoadingPlaceholder className="h-4 w-[200px] mx-auto" />
                    </div>
                )}
            </ModalContent>
        </ModalComponent>
    );
};