<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
import JetActionMessage from "@/Jetstream/ActionMessage.vue";
import JetButton from "@/Jetstream/Button.vue";
import JetFormSection from "@/Jetstream/FormSection.vue";
import JetInputError from "@/Jetstream/InputError.vue";

const form = useForm({
    current_password: "",
    password: "",
    password_confirmation: "",
});

const updatePassword = () => {
    form.put(route("user-password.update"), {
        errorBag: "updatePassword",
        preserveScroll: true,
        onSuccess: () => form.reset(),
        onError: () => {
            if (form.errors.password) {
                form.reset("password", "password_confirmation");
            }

            if (form.errors.current_password) {
                form.reset("current_password");
            }
        },
    });
};
</script>

<template>
    <JetFormSection @submitted="updatePassword">
        <template #title>
            {{ $t("Register.update_password") }}
        </template>

        <template #description>
            {{ $t("Register.Ensure") }}
        </template>

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="current_password"
                    v-model="form.current_password"
                    autocomplete="current-password"
                    help="Enter your current password"
                    :label="$t('Register.current_password')"
                    outer-class="mb-0"
                    placeholder="Enter password (at least 8 characters)"
                    required
                    type="password"
                    validation="required|length:8,100"
                />
                <JetInputError
                    :message="form.errors.current_password"
                    class="mt-2"
                />
            </div>

            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="password"
                    v-model="form.password"
                    autocomplete="new-password"
                    help="Enter a new password"
                    :label="$t('Register.new_password')"
                    name="password"
                    outer-class="mb-0"
                    placeholder="Enter password (at least 8 characters)"
                    required
                    type="password"
                    validation="required|length:8,100"
                />
                <JetInputError :message="form.errors.password" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="password_confirm"
                    v-model="form.password_confirmation"
                    autocomplete="new-password"
                    help="Confirm your new password"
                    :label="$t('Register.new_password')"
                    name="password_confirm"
                    outer-class="mb-0"
                    placeholder="Enter password (at least 8 characters)"
                    required
                    type="password"
                    validation="required|confirm"
                />
                <JetInputError
                    :message="form.errors.password_confirmation"
                    class="mt-2"
                />
            </div>
        </template>

        <template #actions>
            <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
                {{ $t("Register.saaved") }}
            </JetActionMessage>

            <JetButton
                :class="{ 'opacity-25': form.processing }"
                :disabled="form.processing"
                type="submit"
            >
                {{ $t("Register.save") }}
            </JetButton>
        </template>
    </JetFormSection>
</template>
