<script setup>
import { onMounted, ref } from "vue";
import { Inertia } from "@inertiajs/inertia";
import { Link, useForm } from "@inertiajs/inertia-vue3";
import JetButton from "@/Jetstream/Button.vue";
import JetFormSection from "@/Jetstream/FormSection.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 { currentLocation } from "@/composables/location";
import Mobile from "@/components/Inputs/Mobile";
import GeneralRadioGroup from "@/components/Inputs/Selects/Radios/GeneralRadioGroup.vue";
import Modal from "@/components/General/FormModal.vue";
import Button from "@/Jetstream/Button";
import Listbox from "@/components/Listbox.vue";
import CategoriesRadioGroup from "@/components/Inputs/Selects/Radios/CategoriesRadioGroup.vue";

const props = defineProps({
    firm: Object,
    categories: Array,
});

let canUpdateCategories = false;

// set canUpdateCategories to true after 1 second
setTimeout(() => {
    canUpdateCategories = true;
}, 1000);

const form = useForm({
    category_id: props.firm.hierarchicalCategories.category.id,
    sub_categories: props.firm.hierarchicalCategories.sub_categories.map(
        (subCategory) => subCategory.id.toString()
    ),
});

const modal = ref("modal");

const sub_categories = ref([]);

const submit = () => {
    form.post(route("firm-profile-information.update"), {
        errorBag: "updateProfileInformation",
        preserveScroll: true,
        onSuccess: closeModal(),
        onError: (error) => {
            console.log(error);
        },
    });
};
const openEditModal = (mastery) => {};

const openModal = () => {
    modal.value.open();
};

const closeModal = () => {
    modal.value.close();
};
const updatedCategories = (res) => {
    if (!canUpdateCategories) return;
    form.category_id = res.category;
    form.sub_categories = res.subCategories;
    sub_categories.value = res.subCategories;
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title> {{ $t('profile.company_category') }} </template>

        <template #description>
            {{ $t('profile.company_category_text') }} 
        </template>

        <template #form="{ valid }">
            <!-- categories -->
            <CategoriesRadioGroup
                class="col-span-6"
                :items="categories"
                :valid="valid"
                descriptionBy="description"
                name="categories"
                nameBy="name"
                :buttonLabel="$t('Register.save')"
                :cols="'grid-cols-4'"
                :selectedCategory="form.category_id"
                :selectedSubCategories="form.sub_categories"
                @next="submit"
                @updated="updatedCategories"
            >
                <template #actions>
                    <div
                        class="flex items-center justify-end w-full gap-3 pt-5 flex-end"
                    >
                        <JetActionMessage :on="form.recentlySuccessful">
                            {{ $t('Register.saved') }}
                        </JetActionMessage>

                        <JetButton
                            type="submit"
                            :disabled="!valid || form.processing"
                        >
                        {{ $t('Register.save') }}
                        </JetButton>
                    </div>
                </template>
            </CategoriesRadioGroup>
        </template>
    </JetFormSection>
    <Modal @closed="closedModal" ref="modal" title="Add Language">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="tagline_form"
                type="form"
                @submit="submitCreate"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <Listbox
                    :options="languages"
                    label="Your Language*"
                    required
                    validation="min:1"
                    nameBy="name"
                    v-model:value="form.language_id"
                />

                <Listbox
                    :options="proficiencies"
                    label="Proficiency*"
                    required
                    validation="min:1"
                    nameBy="text_en"
                    v-model:value="form.proficiency_id"
                />
                <div class="flex items-center justify-end w-full">
                    <FormKit
                        :loading="form.processing"
                        :disabled="!valid || form.processing"
                        type="submit"
                    >
                        {{ $t('Register.save') }}
                    </FormKit>
                </div>
            </FormKit>
        </div>
    </Modal>
</template>
