"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { RootState } from "@/redux/store";
import { removePhoneNumberPrefixAndAdd971 } from "@/utils/helpers";
import { useMutation } from "@tanstack/react-query";
import { useDispatch, useSelector } from "react-redux";
import { zodResolver } from "@hookform/resolvers/zod";
import { find, isEmpty, size } from "lodash";
import {
    Controller,
    SubmitHandler,
    useForm,
} from "react-hook-form";

import InputText from "@/components/custom-components/text-input";
import Button from "@/components/custom-components/button";
import ValidationErrorMessage from "@/components/custom-components/validation-error-message";

import cn from "@/utils/class-names";
import { routes } from "@/config/routes";
import { setUser } from "@/redux/slice/user-slice";
import { setGuestUser } from "@/redux/slice/guest-user-slice";
import { setSnackbarAlertMessage } from "@/redux/slice/snackbar-slice";

import {
    guestRegiserFormSchema,
    GuestRegisterFormInput,
} from "@/utils/validators/auth-schema";

import useAuth from "@/server_api/hooks/useAuth";
import PostAPI from "@/server_api/api-functions/apipost";
import { apiEndpoints } from "@/server_api/config/api.endpoints";
import { usePathname } from "next/navigation";
import { valuesGuestRegister } from "@/src/utils/form-utils/auth-form-utils";
import { UseMutationProps } from "@/src/constants/common";

export default function GuestCheckout({
    refetchAddress,
}: {
    refetchAddress: () => void;
}) {
    const checkout = useSelector(
        (state: RootState) => state.basicDetails.checkout
    );

    const dispatch = useDispatch();
    const { setLogIn } = useAuth();
    const pathname = usePathname();

    const [errorMessage, setErrorMessage] = useState<string>("");

    const guestCheckoutValues = useMemo(() => {
        if (!isEmpty(checkout) && size(checkout.additionalFields) > 0) {
            const guestCheckout = find(
                checkout.additionalFields,
                (field: any) => field.group === "1"
            );

            if (!isEmpty(guestCheckout)) {
                return guestCheckout;
            }
        }

        return null;
    }, [checkout]);

    const methods = useForm<GuestRegisterFormInput>({
        resolver: zodResolver(guestRegiserFormSchema),
        defaultValues: valuesGuestRegister(),
        mode: "onSubmit",
    });

    const {
        control,
        handleSubmit,
        formState: { errors },
        watch,
    } = methods;

    const onSubmit: SubmitHandler<GuestRegisterFormInput> = (data) => {
        setErrorMessage("");

        handle_guestRegister({
            ...data,
            notRequiredOtp: true,
            phone: removePhoneNumberPrefixAndAdd971(
                data.phone,
                watch("countryCode")
            ),
            apiEndpoint: apiEndpoints.checkout.guest_login,
        } as any);
    };

    const {
        mutate: handle_guestRegister,
        isPending: guestRegister_isLoading,
        error: guestRegister_error,
    } = useMutation<any, Error, UseMutationProps>({
        mutationFn: PostAPI.postAPI,

        onSuccess: async (response: any) => {
            if (response.status) {
                if (!isEmpty(response.requestedData)) {
                    if (response.requestedData.isGuest) {
                        dispatch(setGuestUser(response.requestedData));
                        dispatch(setUser(null));

                        await setLogIn(
                            response.requestedData,
                            response.requestedData.token
                        );

                        refetchAddress();
                    }

                    dispatch(
                        setSnackbarAlertMessage({
                            messages: response?.message,
                            type: "success",
                            from: "register",
                        })
                    );
                } else {
                    setErrorMessage(
                        "Something went wrong. Please try again"
                    );
                }
            } else {
                setErrorMessage(response.message);
            }
        },
    });

    const handl_keyPressGuestLogin = (
        e: React.KeyboardEvent<HTMLInputElement>
    ) => {
        if (e.key === "Enter") {
            e.preventDefault();
            handleSubmit(onSubmit)();
        }
    };

    return (
        <div className="space-y-4">

            {/* Email */}
            <Controller
                control={control}
                name="email"
                render={({ field }) => (
                    <InputText
                        {...field}
                        type="email"
                        placeholder="Enter email"
                        replaceClassName={cn(
                            "w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-secondary focus:ring-secondary",
                            {
                                "border-red-300":
                                    !!errors.email?.message,
                            }
                        )}
                        error={errors.email?.message}
                        required={false}
                    />
                )}
            />

            {/* Phone */}
            <Controller
                control={control}
                name="phone"
                render={({ field }) => (
                    <InputText
                        {...field}
                        type="tel"
                        placeholder="971 55 5555555"
                        replaceClassName={cn(
                            "w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-secondary focus:ring-secondary",
                            {
                                "border-red-300":
                                    !!errors.phone?.message,
                            }
                        )}
                        error={errors.phone?.message}
                        required={false}
                        onKeyDown={handl_keyPressGuestLogin}
                    />
                )}
            />

            <div className="flex flex-col items-center justify-between text-center md:text-start lg:flex-row">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                    <span>New here?</span>

                    <Link
                        href={`${routes.auth.signup}?rd=${pathname}`}
                        className="font-semibold text-primary hover:underline"
                    >
                        Create an account
                    </Link>
                </div>
            </div>

            {/* API error */}
            <ValidationErrorMessage
                errorMessages={guestRegister_error || errorMessage}
            />

            <Button
                className="flex w-full items-center justify-center !rounded-md bg-secondary py-3 font-bold text-primary transition hover:opacity-90 disabled:opacity-60"
                onClick={handleSubmit(onSubmit)}
                isLoading={guestRegister_isLoading}
            >
                CONTINUE AS A GUEST
            </Button>
        </div>
    );


}