<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/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 { Input } from '@/components/ui/input';
import { formErrors } from '@/lib/form';
import { update } from '@/routes/admin/system/settings/social_media';
import type { SocialMediaSettingsData } from '@/types/setting';

const props = defineProps<{
    data: SocialMediaSettingsData;
}>();

const form = useForm({
    instagram_url: props.data.instagram_url ?? '',
    facebook_url: props.data.facebook_url ?? '',
    tiktok_url: props.data.tiktok_url ?? '',
});

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

<template>
    <form @submit.prevent="submit">
        <Card>
            <CardContent>
                <FieldSet>
                    <FieldGroup class="grid gap-4">
                        <Field>
                            <FieldLabel for="instagram_url">
                                Instagram
                            </FieldLabel>
                            <Input id="instagram_url" v-model="form.instagram_url" type="url"
                                placeholder="https://instagram.com/username" />
                            <FieldError :errors="formErrors(form, 'instagram_url')" />
                        </Field>

                        <Field>
                            <FieldLabel for="facebook_url">
                                Facebook
                            </FieldLabel>
                            <Input id="facebook_url" v-model="form.facebook_url" type="url"
                                placeholder="https://facebook.com/pagename" />
                            <FieldError :errors="formErrors(form, 'facebook_url')" />
                        </Field>

                        <Field>
                            <FieldLabel for="tiktok_url">
                                TikTok
                            </FieldLabel>
                            <Input id="tiktok_url" v-model="form.tiktok_url" type="url"
                                placeholder="https://tiktok.com/@username" />
                            <FieldError :errors="formErrors(form, 'tiktok_url')" />
                        </Field>
                    </FieldGroup>
                </FieldSet>
            </CardContent>
        </Card>

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