"use client";

import { FC } from "react";
import { redirect } from "next/navigation";
import { Button, PinInput, Stack } from "@mantine/core";
import { useForm } from "@mantine/form";
import style from "@/components/VerifyPhoneForm/VerifyPhone.module.css";

type VerifyNumberForm = {
    code: string;
};

const VerifyPhoneForm: FC = () => {
    const form = useForm<VerifyNumberForm>({
        initialValues: {
            code: "",
        },
        validate: {
            code: code => code.length !== 6 && "Введите весь код",
        },
    });

    const handleSubmit = (values: VerifyNumberForm) => {
        console.log(values);
    };

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

    return (
        <form onSubmit={form.onSubmit(handleSubmit)}>
            <Stack>
                <PinInput
                    length={6}
                    placeholder="_"
                    oneTimeCode
                    size={"md"}
                    classNames={{
                        root: style["pin-input-root"],
                        input: style["pin-input"],
                    }}
                    {...form.getInputProps("code")}
                />
                <Button
                    variant={"filled"}
                    type={"submit"}
                    disabled={form.values.code.length !== 6}>
                    Подтвердить
                </Button>
                <Button
                    variant={"outline"}
                    onClick={navigateToLogin}>
                    Назад
                </Button>
            </Stack>
        </form>
    );
};

export default VerifyPhoneForm;