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

const props = defineProps({
    user: Object,
});

const form = useForm({
    socials: {
        facebook: props.user.socials?.facebook?.link,
        instagram: props.user.socials?.instagram?.link,
        twitter: props.user.socials?.twitter?.link,
        linkedin: props.user.socials?.linkedin?.link,
    },
});

const updateSocialLinks = () => {
    form.put(route("user-profile-information.update"), {
        errorBag: "updateProfileInformation",
        preserveScroll: true,
        // onSuccess: () => form.reset(),
        onError: () => {},
    });
};
</script>

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

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

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="Facebook"
                    v-model="form.socials.facebook"
                    :label="$t('Register.facebook')"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.facebook.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.facebook" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="instagram"
                    v-model="form.socials.instagram"
                    :label="$t('Register.instagram')"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.instagram.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.instagram" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="twitter"
                    v-model="form.socials.twitter"
                    :label="$t('Register.twitter')"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.twitter.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.twitter" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="linkedin"
                    v-model="form.socials.linkedin"
                    :label="$t('Register.linkedin')"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.linkedin.com/in/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.linkedin" class="mt-2" />
            </div>
        </template>

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

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