<template>
    <div
        class="continer-main pt-[10px] w-full rounded-[10px] bg-[#ffffff] gap-px flex flex-col items-start py-0 px-5"
    >
        <Disclosure v-slot="{ open }">
            <ExpandBtn title="Register.service_serch" :open="open" />

            <DisclosurePanel
                class="panelsub max-w-[298px] bg-[#ffffff] mt-[10px] mb-[10px] text-sm text-gray-300"
            >
                <div class="block slid">
                    <Slider
                        :direction="$i18n.locale === 'ar' ? 'rtl' : 'ltr'"
                        class="slider-red"
                        :step="1"
                        :min="minPrice"
                        :max="maxPrice"
                        v-model="value"
                    />
                </div>
                <br />
                <br />
                <div class="flex mt-[-23px] ml-[5px]">
                    <FormKit
                        :validation="`between:1,${maxPrice}`"
                        v-model="min_value"
                        type="number"
                        :placeholder="minPrice + ' ' + activeCurrency()"
                        validation_label="Min Price"
                    >
                        <template #prefix>
                            <div>{{ activeCurrency() }}</div>
                        </template>
                    </FormKit>

                    <span
                        class="p-2 text-sm font-normal text-gray-200 top-2 font-Inter"
                        >to</span
                    >
                    <FormKit
                        :validation="`between:1,${maxPrice}`"
                        v-model="max_value"
                        type="number"
                        :placeholder="maxPrice + ' ' + activeCurrency()"
                        validation_label="Max Price"
                    >
                        <template #prefix>
                            <div>{{ activeCurrency() }}</div>
                        </template>
                    </FormKit>
                </div>
            </DisclosurePanel>
        </Disclosure>
    </div>
</template>

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

export default {
    props: {
        minPrice: {
            type: Number,
            required: true,
        },
        maxPrice: {
            type: Number,
            required: true,
        },
    },
    components: {
        Slider,
        Disclosure,
        DisclosureButton,
        DisclosurePanel,
        ExpandBtn,
    },

    data() {
        return {
            value: [1, 9999],
            min_value: 1,
            max_value: 9999,
            firstRenderMin: true,
            firstRenderMax: true,
        };
    },
    watch: {
        min_value: {
            handler(val) {
                if (this.firstRenderMin) {
                    this.firstRenderMin = false;
                    return;
                }
                this.$nextTick(() => {
                    if (val < this.minPrice) this.min_value = this.minPrice;
                    else if (val > this.maxPrice)
                        this.min_value = this.maxPrice;
                    this.min_value = parseInt(this.min_value);
                    this.$emit("min_value", this.min_value);
                });
            },
            immediate: true,
        },
        max_value: {
            handler(val) {
                if (this.firstRenderMax) {
                    this.firstRenderMax = false;
                    return;
                }
                this.$nextTick(() => {
                    if (val < this.minPrice) this.max_value = this.minPrice;
                    else if (val > this.maxPrice)
                        this.max_value = this.maxPrice;
                    this.max_value = parseInt(this.max_value);
                    this.$emit("max_value", this.max_value);
                });
            },
            immediate: true,
        },
        value(new_val) {
            var VAL_ZERO = Number.parseInt(new_val[0]); //new value length 0
            var VAL_ONE = Number.parseInt(new_val[1]); //new value lenth on
            if (VAL_ZERO) {
                this.min_value = VAL_ZERO;
            }
            if (VAL_ONE) {
                this.max_value = VAL_ONE;
            }
        },
    },
    beforeMount() {
        this.min_value = JSON.parse(JSON.stringify(this.minPrice));
        this.max_value = JSON.parse(JSON.stringify(this.maxPrice));
        this.value = [
            JSON.parse(JSON.stringify(this.minPrice)),
            JSON.parse(JSON.stringify(this.maxPrice)),
        ];
    },
    mounted() {
        this.min_value = JSON.parse(JSON.stringify(this.minPrice));
        this.max_value = JSON.parse(JSON.stringify(this.maxPrice));
        this.value = [
            JSON.parse(JSON.stringify(this.minPrice)),
            JSON.parse(JSON.stringify(this.maxPrice)),
        ];
    },
};
</script>
<style>
.continer-main .btn-one h2 {
    margin-top: 5px !important;
}
/* slider style */
.slid {
    width: 95% !important;
    margin-top: -11px;
}
.slider-tooltip {
    opacity: 0 !important;
}
.slider-red {
    --slider-connect-bg: #aaaaaa;
    --slider-tooltip-bg: #aaaaaa;
}
/* panel */
.continer-main .panelsub {
    flex-direction: column;
    align-items: flex-start;
}

.continer-main .btn-one,
.continer-main h2 {
    margin-top: -15px !important;
}

/* inputs */
.continer-main input[type="range"] {
    margin-left: 5px !important;
    background-color: #f5f7f9;
    max-width: 50% !important;
    height: 5px;
}

.continer-main input[type="number"] {
    background-color: #ffffff;
    width: 50%;
    /* border: 1px solid #AAAAAA; */
}

/* svg one */
.continer-main .w-5 {
    margin-right: 26.82px;
    width: 40px;
}
.continer-main svg {
    top: 10px !important;
    margin-top: 10px;
}
.slider-txt-dir-rtl.slider-horizontal .slider-handle {
    right: calc(var(--slider-handle-width, 16px) / 2 * -1) !important;
}
</style>
<style src="@vueform/slider/themes/default.css"></style>
