const LinksyFiltersBox = ({
    name: 'LinksyFiltersBox',
    components: {
        LinksyButton,
        LinksyForm
    },
    props: {
        initialValues: {
            type: Object,
            default: null
        },
        onSubmit: {
            type: Function,
            default: null
        },
        validate: {
            type: Function,
            default: null
        },
        scrollable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            firstChildInView: false,
            lastChildInView: false,
        }
    },
    methods: {
        handleCancel() {
            this.$emit('on-cancel');
        },
        scrollFilter(direction) {
          const container = this.$refs.filterContainer;
          const {width: childWidth} = container.querySelector('.linksy-filter-option-box')?.getBoundingClientRect();

          const scrollAmount = direction === -1 ? -childWidth : direction === 1 ? childWidth : 0;

          container.scrollTo({
              left: container.scrollLeft + scrollAmount,
              behavior: 'smooth'
          });

          this.firstChildInView = this.isInViewport(container.firstElementChild);
          this.lastChildInView = this.isInViewport(container.lastElementChild);
        },
        isInViewport(el) {
            const container = this.$refs.filterContainer;
            const elRect = el.getBoundingClientRect();
            const containerRect = container.getBoundingClientRect();

            return (
                elRect.left >= containerRect.left &&
                elRect.right <= containerRect.right
            );
        }
    },
    template: `
        <linksy-form
            enableReinitialize
            class="linksy-filters-box d-flex gap-2 rounded-3 align-items-start justify-content-between"
            :initial-values="initialValues"
            :validate="validate"
            :onSubmit="onSubmit"
            :validate="validate"
            v-slot="{
                values,
                errors,
                handleSubmit,
                handleChange,
                setFieldValue,
            }"
        >
            <div class="linksy-filters-box-options d-flex gap-2 align-items-end justify-content-between">
                <linksy-button 
                    v-if="scrollable" 
                    variant="primary_outline" @click="scrollFilter(-1)" 
                    :style="{ display: !firstChildInView ? 'block' : 'none' }"
                    class="prev-display-filter-btn"
                >
                    <i class="fa-solid fa-angle-left"></i>
                </linksy-button>
                <div ref="filterContainer" class="linksy-filter-options d-flex justify-content-start gap-2">
                    <slot
                        name="options"
                        :values="values"
                        :errors="errors"
                        :handleChange="handleChange"
                        :setFieldValue="setFieldValue"
                        :handleSubmit="handleSubmit"
                    ></slot>
                    <slot name="inline-actions" :values="values"></slot>
                </div>
                <linksy-button v-if="scrollable" 
                    variant="primary_outline" 
                    class="next-display-filter-btn"
                    :style="{ display: !lastChildInView ? 'block' : 'none' }"
                    @click="scrollFilter(1)" 
                >
                    <i class="fa-solid fa-angle-right"></i>
                </linksy-button>
            </div>
            <div class="linksy-filter-actions d-flex gap-2 ms-3 mt-4 align-items-end">
                <slot name="actions">
                    <linksy-button type="submit" variant="primary_outline" @click="handleSubmit" class="d-flex align-items-center gap-1">
                        <i class="fa-solid fa-check"></i>
                        <span>Apply</span>
                    </linksy-button>
                    <linksy-button class="d-flex align-items-center gap-1" variant="secondary" @click="handleCancel">
                        <i class="fa-solid fa-xmark"></i>
                        Reset
                    </linksy-button>
                </slot>
            </div>
        </linksy-form>
    `,
    mounted() {
      this.scrollFilter();
    },
});