<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, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
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('/admin/system/setting/social-media', {
        preserveScroll: true,
        onError: () => {
            toast.error('Gagal menyimpan pengaturan media sosial.');
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <Card>
            <CardHeader>
                <CardTitle>Media Sosial</CardTitle>
                <CardDescription>
                    Tautan profil media sosial yang ditampilkan di website atau aplikasi.
                </CardDescription>
            </CardHeader>
            <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="form.errors.instagram_url ? [form.errors.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="form.errors.facebook_url ? [form.errors.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="form.errors.tiktok_url ? [form.errors.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>
