<script setup>
import { onMounted, ref, onBeforeMount } 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";
import OptionGroup from "@/components/Inputs/Selects/Checkboxes/Pills/OptionGroup.vue";
import Skills from "@/components/Inputs/Selects/Checkboxes/Pills/Skills.vue";

const props = defineProps({
    engineer: Object,
    skills: {
        type: Array,
        default: () => [
            {
                id: 1,
                name: "Design and Manufacturing",
            },
            {
                id: 2,
                name: "Aerodynamics",
            },
            {
                id: 3,
                name: "Combustion and Energy Systems",
            },
            {
                id: 4,
                name: "Vibrations, Acoustic mechanics",
            },
            {
                id: 5,
                name: "Design and Manufacturing",
            },
            {
                id: 6,
                name: "Materials and Structures",
            },
        ],
    },
});

const form = useForm({
    // get engineer skills ids from props
    skills: props.engineer.skills.map((skill) => skill.id),
});

const updateSocialLinks = () => {
    form.post(route("engineer-profile-information.update"), {
        errorBag: "updateProfileInformation",
        preserveScroll: true,
        onSuccess: () => {
            // form.skills = props.engineer.skills;
        },
        onError: (error) => {
            console.log(error);
        },
    });
};
const addSkill = () => {};
</script>

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

        <template #description>
            {{ $t("profile.skills_text") }}
        </template>

        <template #form>
            <div class="col-span-6">
                <Skills
                    v-model:value="form.skills"
                    :label="$t('Register.set_skils')"
                    :help="$t('Register.first_fivesk')"
                />
                <JetInputError :message="form.errors.skills" class="mt-2" />
            </div>
        </template>

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

            <JetButton type="submit" :disabled="!valid || form.processing">
                {{ $t("Register.save") }}
            </JetButton>
        </template>
    </JetFormSection>
</template>
