<template>
    <div
        class="relative skills flex flex-col w-full maincontiner rounded-[10px] bg-[#ffffff] items-start my-auto gap-px px-5"
    >
        <Disclosure v-slot="{ open }">
            <ExpandBtn title="Register.skils_serch" :open="open" />

            <DisclosurePanel class="text-sm text-gray-300 mb-[10px] w-full">
                <div class="relative w-full max-w-xs serch-item">
                    <div
                        class="absolute inset-y-0 left-0 flex items-center gap-2 pl-3 pointer-events-none"
                    >
                        <svg
                            aria-hidden="true"
                            class="w-5 h-5 text-gray-500 dark:text-gray-400"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                            ></path>
                        </svg>
                    </div>

                    <div class="forkit_serch">
                        <FormKit
                            type="search"
                            placeholder="Search..."
                            v-model="searchQuery"
                        />
                    </div>
                </div>

                <div class="formthree">
                    <FormKit
                        @input="$emit('update:selectedskils', value)"
                        v-model="value"
                        type="checkbox"
                        :options="resultQuery"
                    >
                        <template #label="context">
                            <label
                                :for="context.option.attrs.id"
                                :class="{
                                    chang_color: context._value.includes(
                                        context.option.id
                                    ),
                                }"
                                >{{ context.option.label }}
                            </label>
                        </template>
                    </FormKit>
                </div>
                <button
                    v-if="resultQuery.length > 3"
                    @click="checkstate = !checkstate"
                    class="btn-see absolute mt-[-8px] ml-[3px] text-xs w-14 leading-4 text-gray-300 italic font-medium font-Inter"
                >
                    {{ !checkstate ? "See more" : "See less" }}</button
                ><br />
            </DisclosurePanel>
        </Disclosure>
    </div>
</template>

<script>
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
import ExpandBtn from "./ExpandBtn.vue";

export default {
    props: ["skils", "skills"],
    data() {
        return {
            value: [],
            checkstate: false,
            searchQuery: null,
        };
    },
    computed: {
        resultQuery() {
            if (this.searchQuery) {
                return this.skil.filter((item) => {
                    return this.searchQuery
                        .toLowerCase()
                        .split(" ")
                        .every((v) => item.label.toLowerCase().includes(v));
                });
            } else if (this.checkstate == true) {
                this.backupdata = this.skil;

                return (this.skil = this.backupdata);
            } else {
                return JSON.parse(JSON.stringify(this.skil.slice(0, 5)));
            }
        },
    },
    created() {
        this.skil = this.skills.map((user) => ({
            value: user.id,
            label: user[`name_${this.$i18n.locale}`],
            id: user.id,
        }));
    },
    mounted() {},
    components: {
        Disclosure,
        DisclosureButton,
        DisclosurePanel,
        ExpandBtn,
    },
};
</script>
<style>
/* style fromket */
.forkit_se .formkit-inner {
    margin-right: -28px;
    width: 110px;
    background-color: #ebf0fe;
}

.chang_color {
    color: blue;
}

.form-control {
    background-color: #ebf0fe !important;
    height: 38px;
}
.skills .formthree label {
    margin-left: -15px;
    color: #aaaaaa;
    font-size: 14px;
    cursor: pointer;
}

.formkit-outer .formkit-option {
    border: none;
}

.btn- h2 {
    margin-top: -7px !important;
}

.skills .formthree {
    margin-top: -17px;
    margin-left: 22px;
}
.skills .formthree input[type="checkbox"] {
    display: block;
    padding-left: 0;
    margin-left: -13px;
}

.formthree input[type="serch"] {
    width: 100%;
}
.maincontine h2 {
    height: 22px;
    line-height: 22px;
}
.add-h2 {
    position: absolute;
    margin-left: 16px;
    padding-bottom: 3px !important ;
}
.btn-two {
    margin-right: 22.5px;
    margin-bottom: 6px;
}

.maincontine .btn-see {
    border-bottom-width: 1px;
    border-color: black;
}

/* svg one */
.skills .maincontine .w-5 {
    margin-right: 32.82px;
}
.maincontine svg {
    top: 10px !important;
}

/* style ul */
.formthree ul {
    margin-bottom: -10px;
}
.formthree ul li {
    line-height: 20px;
    margin-top: 10px;
}
.serch-item svg {
    margin-top: 1px;
    width: 16px;
}
.forkit_serch .formkit-inner {
    background-color: #ebf0fe;
    margin-top: -5px;
}

.forkit_serch .text-xs {
    margin-left: 25px !important;
    background-color: #ebf0fe !important;
}
.forkit_serch input[type="serch"] {
    height: 38px !important;
    border: none !important;
    margin-left: 25px;
}
</style>
