<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { Save, Eye, EyeOff } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group';
import AccountLayout from '@/layouts/AccountLayout.vue';
import { formErrors } from '@/lib/form';
import { update } from '@/routes/admin/account/password';
import type { PasswordFormData } from '@/types/account';


const form = useForm<PasswordFormData>({
    current_password: '',
    password: '',
    password_confirmation: '',
});

const showCurrentPassword = ref(false);
const showPassword = ref(false);
const showPasswordConfirmation = ref(false);

function submit() {
    form.put(update.url(), {
        onSuccess: () => {
            form.reset();
        },
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
    });
}
</script>

<template>

    <Head title="Kata Sandi" />

    <AccountLayout>
        <form @submit.prevent="submit">
            <div class="grid gap-6">
                <Card>
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-3">
                                <Field>
                                    <FieldLabel for="current_password" required>
                                        Kata Sandi Saat Ini
                                    </FieldLabel>
                                    <InputGroup>
                                        <InputGroupInput
                                            id="current_password"
                                            v-model="form.current_password"
                                            :type="showCurrentPassword ? 'text' : 'password'"
                                            placeholder="********"
                                            autocomplete="current-password"
                                        />
                                        <InputGroupAddon align="inline-end">
                                            <InputGroupButton
                                                type="button"
                                                size="icon-xs"
                                                @click="showCurrentPassword = !showCurrentPassword"
                                            >
                                                <Eye v-if="!showCurrentPassword" class="h-4 w-4" />
                                                <EyeOff v-else class="h-4 w-4" />
                                            </InputGroupButton>
                                        </InputGroupAddon>
                                    </InputGroup>
                                    <FieldError :errors="formErrors(form, 'current_password')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="password" required>
                                        Kata Sandi Baru
                                    </FieldLabel>
                                    <InputGroup>
                                        <InputGroupInput
                                            id="password"
                                            v-model="form.password"
                                            :type="showPassword ? 'text' : 'password'"
                                            placeholder="********"
                                            autocomplete="new-password"
                                        />
                                        <InputGroupAddon align="inline-end">
                                            <InputGroupButton
                                                type="button"
                                                size="icon-xs"
                                                @click="showPassword = !showPassword"
                                            >
                                                <Eye v-if="!showPassword" class="h-4 w-4" />
                                                <EyeOff v-else class="h-4 w-4" />
                                            </InputGroupButton>
                                        </InputGroupAddon>
                                    </InputGroup>
                                    <FieldError :errors="formErrors(form, 'password')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="password_confirmation" required>
                                        Konfirmasi Kata Sandi Baru
                                    </FieldLabel>
                                    <InputGroup>
                                        <InputGroupInput
                                            id="password_confirmation"
                                            v-model="form.password_confirmation"
                                            :type="showPasswordConfirmation ? 'text' : 'password'"
                                            placeholder="********"
                                            autocomplete="new-password"
                                        />
                                        <InputGroupAddon align="inline-end">
                                            <InputGroupButton
                                                type="button"
                                                size="icon-xs"
                                                @click="showPasswordConfirmation = !showPasswordConfirmation"
                                            >
                                                <Eye v-if="!showPasswordConfirmation" class="h-4 w-4" />
                                                <EyeOff v-else class="h-4 w-4" />
                                            </InputGroupButton>
                                        </InputGroupAddon>
                                    </InputGroup>
                                    <FieldError :errors="formErrors(form, 'password_confirmation')" />
                                </Field>
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <div class="flex items-center justify-end gap-2">
                    <Button type="submit" :disabled="form.processing">
                        <Save class="size-4" />
                        {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
                    </Button>
                </div>
            </div>
        </form>
    </AccountLayout>
</template>
