<template>
    <div
        class="relative flex flex-col w-full rounded-[10px] bg-[#ffffff] items-start my-auto gap-px px-5"
    >
        <Disclosure v-slot="{ open }">
            <ExpandBtn title="Register.location_serch" :open="open" />
            <DisclosurePanel class="text-sm text-gray-300 mb-[10px] w-full">
                <div class="relative w-full max-w-xs serch-item rtl:-ml-2">
                    <div
                        class="absolute inset-y-0 left-0 flex items-center gap-2 px-2 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="forki">
                    <FormKit
                        @input="$emit('update:selectedLocations', 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="text-xs italic font-medium leading-4 text-gray-300 btn-seemore absolute mx-[3px] mt-[-8px] btn_clos font-Inter"
                >
                    {{
                        checkstate
                            ? $t("Register.see_less")
                            : $t("Register.see_more")
                    }}</button
                ><br />
            </DisclosurePanel>
        </Disclosure>
    </div>
</template>

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

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

                return (this.backupdata = this.userData);
            } else {
                return JSON.parse(JSON.stringify(this.userData.slice(0, 5)));
            }
        },
    },
    mounted() {
        this.userData = this.Location.map((user) => ({
            value: user.value,
            label: user.label,
            id: user.id,
            __original: user.id,
        }));
    },
};
</script>
<style>
/* style continer */

.btn-on h2 {
    margin-top: -13px !important;
    width: 270px !important;
}
/* panel */

.adddiv {
    margin-bottom: 15px;
}
.divpaneltwo {
    margin: -1;
}
/* style fromket */

.chang_color {
    color: blue;
}
.forkit_serch .formkit-inner {
    margin-right: 0px;
    margin-left: 0px;
    background-color: #ebf0fe;
    margin-top: -5px;
}
.forki {
    margin-top: -14px;
}
.forkit_serch .text-xs {
    /* margin-left: 25px !important; */
    /* margin-right: 25px !important; */
    background-color: #ebf0fe !important;
}

.forki label {
    margin-left: 6px;

    color: #aaaaaa;
    cursor: pointer;
}

.forki input[type="checkbox"] {
    margin-top: -5px;
    margin-left: 24px;
}

.chang_color {
    color: #29419b !important;
}

.forkit_serch input[type="serch"] {
    height: 38px !important;
    border: none !important;
    margin-left: 25px;
    margin-right: 25px;
}
.form-control {
    background-color: #ebf0fe !important;
    height: 38px;
}
.forki .formkit-label {
    margin-left: -10px;
    color: #aaaaaa;
    font-size: 14px;
}

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

/* end style formkit */

.maincontiners h2 {
    height: 22px;
    line-height: 22px;
}
.add-h2 {
    margin-top: 1px;
    position: absolute;
    margin-left: 16px;
}
.btn-two {
    margin-right: 22.5px;
    margin-bottom: 6px;
}

.btn-seemore {
    border-bottom-width: 1px;
    border-color: black;
    width: 60px !important;
}

/* svg one */
.maincontiners .w-5 {
    right: 10px;
}
.maincontiners .btn-on svg {
    top: 31px !important;
    /* margin-top: -10px; */
    /* right: 25px; */
    position: absolute;
}

.serch-item svg {
    margin-top: 1px;
    width: 16px;
}
.maincontiners button {
    left: 41px;
    width: 80%;
}
/* style ul */
.forki ul {
    margin-bottom: -10px;
    margin-left: -10px;
    border: none;
}
.maincontiners ul li {
    line-height: 20px;
    margin-top: 10px;
}
</style>
