"use client";

import { FC, useState } from "react";
import { redirect } from "next/navigation";
import { Button, Stack } from "@mantine/core";
import { useForm } from "@mantine/form";
import PhoneInput from "@/components/PhoneInput/PhoneInput";

type LoginForm = {
    phoneNumber: string;
};

type Props = {
    isCreatingId?: boolean;
};

const LoginForm: FC<Props> = ({ isCreatingId = false }) => {
    const [phoneMask, setPhoneMask] = useState<string>("");
    const form = useForm<LoginForm>({
        initialValues: {
            phoneNumber: "",
        },
        validate: {
            phoneNumber: phoneNumber =>
                phoneNumber.length !== phoneMask.length &&
                "Введите корректный номер",
        },
    });

    const handleSubmit = (values: LoginForm) => {
        console.log(values);
        console.log(phoneMask);

        redirect("/verify-phone");
    };

    const navigateToCreateId = () => redirect("/create-id");

    const navigateToLogin = () => redirect("/");

    return (
        <form onSubmit={form.onSubmit(handleSubmit)}>
            <Stack>
                <PhoneInput
                    {...form.getInputProps("phoneNumber")}
                    setPhoneMask={setPhoneMask}
                />
                {isCreatingId ? (
                    <>
                        <Button
                            variant={"filled"}
                            type={"submit"}>
                            Создать аккаунт
                        </Button>
                        <Button
                            variant={"outline"}
                            onClick={() => navigateToLogin()}>
                            Уже есть LogiDex ID
                        </Button>
                    </>
                ) : (
                    <>
                        <Button
                            variant={"filled"}
                            type={"submit"}>
                            Войти
                        </Button>
                        <Button
                            variant={"outline"}
                            onClick={() => navigateToCreateId()}>
                            Создать LogiDex ID
                        </Button>
                    </>
                )}
            </Stack>
        </form>
    );
};

export default LoginForm;