<template>
    <section
        class="relative z-10 flex flex-col items-center justify-center w-full"
    >
        <div
            class="mx-auto relative z-50 flex items-center justify-between w-full max-w-3xl gap-2 p-2.5 md:p-4 translate-y-[calc(-50%-20px)] bg-white rounded-lg shadow"
        >
            <div class="items-center justify-start flex-1 hidden gap-6 md:flex">
                <svg
                    width="31"
                    height="31"
                    viewBox="0 0 31 31"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_2485_64552)">
                        <path
                            d="M12.5176 21.7288C17.3501 21.7288 21.2676 17.8113 21.2676 12.9788C21.2676 8.14627 17.3501 4.22876 12.5176 4.22876C7.68509 4.22876 3.76758 8.14627 3.76758 12.9788C3.76758 17.8113 7.68509 21.7288 12.5176 21.7288Z"
                            stroke="#29419B"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M26.2676 26.7288L18.7676 19.2288"
                            stroke="#29419B"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </g>
                    <defs>
                        <clipPath id="clip0_2485_64552">
                            <rect
                                width="30"
                                height="30"
                                fill="white"
                                transform="translate(0.0175781 0.47876)"
                            />
                        </clipPath>
                    </defs>
                </svg>
                <input
                    class="!border-transparent flex-1 focus:ring-transparent caret-red-300 text-lg placeholder:text-gray-200"
                    v-model="search"
                    type="text"
                    :placeholder="$t('Register.try_search')"
                />
            </div>
            <div class="hidden md:flex md:items-center md:justify-end md:gap-2">
                <Listbox v-model="selected" name="search-criteria" class="">
                    <div class="relative z-50">
                        <ListboxButton
                            class="flex gap-2 text-lg py-4 px-6 min-w-[180px] items-center justify-between disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed flex-1 font-medium rounded-lg"
                        >
                            <span class="block truncate">
                                {{ $t("Register." + selected.name) }}
                            </span>
                            <span class="flex items-center pointer-events-none">
                                <svg
                                    class="icon icon-tabler icon-tabler-chevron-down"
                                    fill="none"
                                    height="20"
                                    stroke="currentColor"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="1.5"
                                    viewBox="0 0 24 24"
                                    width="20"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M0 0h24v24H0z"
                                        fill="none"
                                        stroke="none"
                                    />
                                    <polyline points="6 9 12 15 18 9" />
                                </svg>
                            </span>
                        </ListboxButton>

                        <transition
                            leave-active-class="transition duration-100 ease-in"
                            leave-from-class="opacity-100"
                            leave-to-class="opacity-0"
                        >
                            <ListboxOptions
                                class="absolute left-1/2 -translate-x-1/2 z-50 py-2 top-[70px] mt-1 max-h-64 w-full overflow-auto flex flex-col gap-2 rounded-lg bg-white text-base shadow-sm ring-1 ring-black ring-opacity-5"
                            >
                                <ListboxOption
                                    v-for="option in types"
                                    :key="option.name"
                                    v-slot="{ active, selected }"
                                    :value="option"
                                    as="template"
                                >
                                    <li
                                        :class="[
                                            active ? 'bg-blue-100' : 'bg-white',
                                            'relative cursor-default select-none px-4 py-2',
                                        ]"
                                    >
                                        <span
                                            :class="[
                                                selected
                                                    ? 'font-medium'
                                                    : 'font-normal',
                                                'block truncate',
                                            ]"
                                            >{{
                                                $t("Register." + option.name)
                                            }}</span
                                        >
                                    </li>
                                </ListboxOption>
                            </ListboxOptions>
                        </transition>
                    </div>
                </Listbox>
                <!-- <transition
                enter-active-class="transition duration-100 ease-out"
                enter-from-class="transform scale-95 opacity-0 "
                enter-to-class="transform scale-100 opacity-100 "
                leave-active-class="transition duration-75 ease-out"
                leave-from-class="transform scale-100 opacity-100 "
                leave-to-class="transform scale-95 opacity-0 "
            >
              <ListboxOption
                v-for="option in types"
                :key="option[`name_${$i18n.locale}`]"
                v-slot="{ active, selected }"
                :value="option"
                as="template"
              >
                <li
                  :class="[
                    active ? 'bg-blue-100' : 'bg-white',
                    'relative cursor-default select-none px-4 py-2',
                  ]"
                >
                    Go
                </Button>
            </transition> -->
            </div>
            <div class="flex-1 block md:hidden">
                <!-- <Button :href="route('projects.index')" size="full-md">
                    <div class="flex items-center justify-between w-full">
                        <span class="text-lg font-medium">{{
                            $t("Register.search")
                        }}</span>
                        <svg
                            width="17"
                            height="16"
                            viewBox="0 0 17 16"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_2702_72156)">
                                <path
                                    d="M7.40495 11.3333C9.98228 11.3333 12.0716 9.244 12.0716 6.66667C12.0716 4.08934 9.98228 2 7.40495 2C4.82762 2 2.73828 4.08934 2.73828 6.66667C2.73828 9.244 4.82762 11.3333 7.40495 11.3333Z"
                                    stroke="white"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M14.7383 14L10.7383 10"
                                    stroke="white"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_2702_72156">
                                    <rect
                                        width="16"
                                        height="16"
                                        fill="white"
                                        transform="translate(0.738281)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </Button> -->
                <div class="flex items-center justify-between gap-2">
                    <input
                        class="!border-transparent text-sm flex-1 focus:ring-transparent caret-red-300 placeholder:text-gray-200"
                        v-model="search"
                        type="text"
                        :placeholder="$t('Register.try_search')"
                    />
                    <div class="flex items-center justify-end gap-2">
                        <Listbox
                            v-model="selected"
                            name="search-criteria"
                            class=""
                        >
                            <div class="relative z-50">
                                <ListboxButton
                                    class="flex gap-2 text-sm py-4 px-1 min-w-[120px] items-center justify-between disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed flex-1 font-medium rounded-lg"
                                >
                                    <span class="block truncate">
                                        {{ $t("Register." + selected.name) }}
                                    </span>
                                    <span
                                        class="flex items-center pointer-events-none"
                                    >
                                        <svg
                                            class="icon icon-tabler icon-tabler-chevron-down"
                                            fill="none"
                                            height="20"
                                            stroke="currentColor"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="1.5"
                                            viewBox="0 0 24 24"
                                            width="20"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M0 0h24v24H0z"
                                                fill="none"
                                                stroke="none"
                                            />
                                            <polyline points="6 9 12 15 18 9" />
                                        </svg>
                                    </span>
                                </ListboxButton>

                                <transition
                                    leave-active-class="transition duration-100 ease-in"
                                    leave-from-class="opacity-100"
                                    leave-to-class="opacity-0"
                                >
                                    <ListboxOptions
                                        class="absolute min-w-[140px] left-1/2 -translate-x-1/2 z-50 py-2 top-[70px] mt-1 max-h-64 w-full overflow-auto flex flex-col gap-2 rounded-lg bg-white text-base shadow-sm ring-1 ring-black ring-opacity-5"
                                    >
                                        <ListboxOption
                                            v-for="option in types"
                                            :key="option.name"
                                            v-slot="{ active, selected }"
                                            :value="option"
                                            as="template"
                                        >
                                            <li
                                                :class="[
                                                    active
                                                        ? 'bg-blue-100'
                                                        : 'bg-white',
                                                    'relative cursor-default select-none px-4 py-2',
                                                ]"
                                            >
                                                <span
                                                    :class="[
                                                        selected
                                                            ? 'font-medium'
                                                            : 'font-normal',
                                                        'block truncate',
                                                    ]"
                                                    >{{
                                                        $t(
                                                            "Register." +
                                                                option.name
                                                        )
                                                    }}</span
                                                >
                                            </li>
                                        </ListboxOption>
                                    </ListboxOptions>
                                </transition>
                            </div>
                        </Listbox>
                        <!-- <transition
                enter-active-class="transition duration-100 ease-out"
                enter-from-class="transform scale-95 opacity-0 "
                enter-to-class="transform scale-100 opacity-100 "
                leave-active-class="transition duration-75 ease-out"
                leave-from-class="transform scale-100 opacity-100 "
                leave-to-class="transform scale-95 opacity-0 "
            >
              <ListboxOption
                v-for="option in types"
                :key="option[`name_${$i18n.locale}`]"
                v-slot="{ active, selected }"
                :value="option"
                as="template"
              >
                <li
                  :class="[
                    active ? 'bg-blue-100' : 'bg-white',
                    'relative cursor-default select-none px-4 py-2',
                  ]"
                >
                    Go
                </Button>
            </transition> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="relative z-10 w-full max-w-3xl -translate-y-14">
            <AlgoliaLiveSearch :q="search" :target="selected.name" />
        </div>
    </section>
</template>

<script>
import {
    Listbox,
    ListboxButton,
    ListboxOption,
    ListboxOptions,
} from "@headlessui/vue";
import Button from "@/Jetstream/Button";

import algoliasearch from "algoliasearch";
import { Link } from "@inertiajs/inertia-vue3";
import _ from "lodash";
import AlgoliaLiveSearch from "@/components/Filtration/AlgoliaLiveSearch";

export default {
    data() {
        return {
            search: "",
            selected: null,
            types: [
                {
                    name: "Projects",
                    code: "pr",
                },
                {
                    name: "Services",
                    code: "sr",
                },
                {
                    name: "Engineers",
                    code: "en",
                },
                {
                    name: "Firms",
                    code: "fi",
                },
            ],
        };
    },
    beforeMount() {
        this.selected = this.types[0];
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxOption,
        ListboxOptions,
        Button,
        Link,
        AlgoliaLiveSearch,
    },
    watch: {
        selected: function () {
            this.search = "";
        },
    },
};
</script>
