import Input from "@/twui/components/form/Input";
import useSignupForm from "../(hooks)/use-signup-form";

type Props = ReturnType<typeof useSignupForm>;

export default function SignupFormPassword({
    isPasswordConfirmed,
    newUser,
    setNewUser,
    setIsPasswordConfirmed,
}: Props) {
    const is_password_valid = Boolean(
        isPasswordConfirmed &&
        Boolean(newUser.password?.match(/./)) &&
        Boolean(newUser.confirmed_password?.match(/./)),
    );

    return (
        <>
            <Input
                placeholder="Password"
                title="Password"
                type="password"
                changeHandler={(v) => {
                    setNewUser((prev) => ({
                        ...prev,
                        password: v,
                    }));
                }}
                validity={{
                    isValid:
                        !Boolean(newUser.password?.match(/./)) ||
                        !Boolean(newUser.confirmed_password?.match(/./))
                            ? true
                            : is_password_valid,
                    msg: `Passwords don't match`,
                }}
                required
                showLabel
            />
            <Input
                placeholder="Confirm Password"
                title="Confirm Password"
                type="password"
                changeHandler={(v) => {
                    setNewUser((prev) => ({
                        ...prev,
                        confirmed_password: v,
                    }));

                    setIsPasswordConfirmed(v == newUser.password);
                }}
                showLabel
            />
        </>
    );
}
