<script setup>
import { 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";

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

const form = useForm({
    language_id: null,
    proficiency_id: null,
});

const modal = ref("modal");

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

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

const closeModal = () => {
    modal.value.close();
};

const editModal = ref("editModal");

const editForm = useForm({
    id: null,
    language_id: null,
    proficiency_id: null,
});

const openEditModal = (mastery) => {
    editForm.id = mastery.id;
    editForm.language_id = mastery.language.id;
    editForm.proficiency_id = mastery.proficiency.id;
    editModal.value.open();
};

const closeEditModal = () => {
    editModal.value.close();
};

const closedEditModal = () => {
    editForm.reset();
};

const editSubmit = async () => {
    editForm.post(
        route("firm-profile-information.edit.language", editForm.id),
        {
            preserveScroll: true,
            onSuccess: (res) => {
                form.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};

const deleteSubmit = async () => {
    editForm.delete(
        route("firm-profile-information.delete.language", {
            id: editForm.id,
        }),
        {
            preserveScroll: true,
            onSuccess: (res) => {
                editForm.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title> Language </template>

        <template #description> Update your languages here. </template>

        <template #form="{ valid }">
            <!-- languages -->
            <ul
                v-if="firm.languageMasteries.length > 0"
                class="flex w-full flex-col flex-wrap gap-2.5 mt-1.5 col-span-6"
            >
                <li
                    v-for="mastery in firm.languageMasteries"
                    :key="`language_${mastery.language.id}_${mastery.proficiency.id}`"
                    class="flex w-full gap-2.5"
                >
                    <Button
                        @click="openEditModal(mastery)"
                        type="button"
                        size="xs"
                        buttonStyle="outline"
                        class="mb-auto"
                    >
                        <span class="flex items-center justify-center gap-1">
                            <svg
                                width="16"
                                height="17"
                                viewBox="0 0 16 17"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_917_36335)">
                                    <path
                                        d="M5.99984 5.16675H3.99984C3.64622 5.16675 3.30708 5.30722 3.05703 5.55727C2.80698 5.80732 2.6665 6.14646 2.6665 6.50008V12.5001C2.6665 12.8537 2.80698 13.1928 3.05703 13.4429C3.30708 13.6929 3.64622 13.8334 3.99984 13.8334H9.99984C10.3535 13.8334 10.6926 13.6929 10.9426 13.4429C11.1927 13.1928 11.3332 12.8537 11.3332 12.5001V10.5001"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6 10.5001H8L13.6667 4.8334C13.9319 4.56819 14.0809 4.20848 14.0809 3.8334C14.0809 3.45833 13.9319 3.09862 13.6667 2.8334C13.4015 2.56819 13.0417 2.41919 12.6667 2.41919C12.2916 2.41919 11.9319 2.56819 11.6667 2.8334L6 8.50007V10.5001Z"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10.6665 3.83325L12.6665 5.83325"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_917_36335">
                                        <rect
                                            width="16"
                                            height="16"
                                            fill="white"
                                            transform="translate(0 0.5)"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </span>
                    </Button>
                    <span class="flex flex-col w-full">
                        <h3 class="font-medium text-gray-300">
                            {{ mastery.language.name }}
                        </h3>
                        <h4 class="text-sm font-medium text-gray-200">
                            {{ mastery.proficiency.text_en }}
                        </h4>
                    </span>
                </li>
            </ul>
            <div
                v-else
                class="w-full flex flex-col gap-2.5 items-center justify-center py-4 col-span-6"
            >
                <svg
                    width="172"
                    height="149"
                    viewBox="0 0 172 149"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_917_36986)">
                        <path
                            opacity="0.2"
                            d="M0.732422 10.0338C0.732422 4.51097 5.20957 0.0338135 10.7324 0.0338135H127.209C132.732 0.0338135 137.209 4.51097 137.209 10.0338V120.15C137.209 125.672 132.732 130.15 127.209 130.15H10.7324C5.20958 130.15 0.732422 125.672 0.732422 120.15V10.0338Z"
                            fill="#50CD89"
                        />
                        <path
                            d="M104.11 34.338C100.694 32.7196 96.9614 31.8801 93.1814 31.8801C89.4014 31.8801 85.6686 32.7196 82.2526 34.338L18.8393 64.3793C17.6721 64.9299 16.6951 65.8152 16.0325 66.9226C15.37 68.03 15.0517 69.3095 15.1183 70.5983V109.968C15.1183 111.693 15.8037 113.348 17.0236 114.568C18.2436 115.788 19.8982 116.473 21.6235 116.473C23.3488 116.473 25.0035 115.788 26.2235 114.568C27.4434 113.348 28.1288 111.693 28.1288 109.968V80.7465L41.1393 87.1997V122.979C41.1395 123.834 41.3085 124.682 41.6367 125.472C41.9649 126.262 42.4458 126.98 43.0519 127.584L43.3771 127.897L44.1578 128.612C48.2354 132.246 52.6434 135.491 57.3244 138.305C66.0155 143.535 78.5706 149 93.1814 149C107.792 149 120.347 143.535 129.051 138.305C133.733 135.491 138.141 132.246 142.218 128.612L142.999 127.897L143.298 127.584H143.324C143.929 126.978 144.409 126.257 144.735 125.465C145.061 124.672 145.227 123.823 145.224 122.966V87.1867L167.628 76.0757C168.723 75.5333 169.643 74.6934 170.283 73.6521C170.923 72.6109 171.256 71.4105 171.246 70.1884C171.235 68.9663 170.88 67.7719 170.222 66.7422C169.563 65.7125 168.628 64.8891 167.524 64.3662L104.11 34.3249V34.338ZM104.527 107.392L132.213 93.6529V120.09C129.127 122.708 125.833 125.071 122.364 127.155C114.818 131.683 104.592 135.989 93.1814 135.989C81.7712 135.989 71.5579 131.696 63.9988 127.155C60.5299 125.071 57.2361 122.708 54.1499 120.09V93.6529L81.8363 107.392C88.992 110.931 97.3708 110.931 104.527 107.392ZM98.5418 46.0995L149.829 70.3901L98.7369 95.7346C97.0099 96.5901 95.1087 97.0351 93.1814 97.0351C91.2542 97.0351 89.3529 96.5901 87.6259 95.7346L36.5336 70.3901L87.8211 46.0995C89.4965 45.3054 91.3274 44.8935 93.1814 44.8935C95.0355 44.8935 96.8664 45.3054 98.5418 46.0995ZM143.298 127.597L143.285 127.61L143.298 127.597Z"
                            fill="#50CD89"
                        />
                    </g>
                    <defs>
                        <clipPath id="clip0_917_36986">
                            <rect
                                width="171"
                                height="149"
                                fill="white"
                                transform="translate(0.5)"
                            />
                        </clipPath>
                    </defs>
                </svg>

                <p class="text-xs text-center text-gray-200">
                    You don’t have your languages listed in your profile, start
                    adding!
                </p>
            </div>
            <div class="flex items-center justify-start w-full col-span-6">
                <Button
                    @click="openModal"
                    type="button"
                    size="sm"
                    buttonStyle="outline"
                >
                    <span class="flex items-center justify-center gap-1">
                        <svg
                            width="16"
                            height="17"
                            viewBox="0 0 16 17"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_917_36344)">
                                <path
                                    d="M8 3.83325V13.1666"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M3.3335 8.5H12.6668"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_917_36344">
                                    <rect
                                        width="16"
                                        height="16"
                                        fill="white"
                                        transform="translate(0 0.5)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>

                        Add new Language
                    </span>
                </Button>
            </div>
        </template>

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

            <JetButton type="submit" :disabled="!valid || form.processing">
                {{ $t('Register.save') }}
            </JetButton>
        </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>
    <Modal @closed="closedEditModal" ref="editModal" title="Edit Language">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="projects_form"
                type="form"
                @submit="editSubmit"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <Listbox
                    :options="languages"
                    label="Your Language*"
                    required
                    validation="min:1"
                    nameBy="name"
                    v-model:value="editForm.language_id"
                />

                <Listbox
                    :options="proficiencies"
                    label="Proficiency*"
                    required
                    validation="min:1"
                    nameBy="text_en"
                    v-model:value="editForm.proficiency_id"
                />

                <div class="flex items-center justify-end w-full gap-5">
                    <Button
                        @click="deleteSubmit"
                        type="button"
                        buttonStyle="danger"
                        :loading="editForm.processing"
                        :disabled="editForm.processing"
                        size="md"
                        >Delete</Button
                    >
                    <Button
                        type="submit"
                        :loading="editForm.processing"
                        :disabled="editForm.processing || !valid"
                        size="md"
                        >{{ $t('Register.save') }}</Button
                    >
                </div>
            </FormKit>
        </div>
    </Modal>
</template>
