<template>
    <label
        v-if="label"
        class="block mb-4 text-xs font-semibold text-gray-300"
        >{{ label }}</label
    >
    <div
        v-if="options.length > 0"
        ref="options"
        class="flex flex-wrap items-start justify-start gap-2.5 mb-2.5"
    >
        <Option
            v-for="(option, index) in options"
            v-show="index < limit || showAll || isChecked(option.id)"
            :key="option.id"
            :checked="isChecked(option.id)"
            :name="name"
            :option="option"
            :nameBy="nameBy"
            @sync="sync"
        />

        <button
            v-if="addAction"
            class="px-2.5 flex-nowrap text-center gap-1.5 py-0.5 rounded-full transition-all duration-200 flex items-center justify-center text-sm select-none border border-blue-100 text-red-300 !cursor-pointer"
            type="button"
            @click="addAction"
        >
            <span>
                {{ addLabel || "Add" }}
            </span>

            <svg
                fill="none"
                height="10"
                viewBox="0 0 10 10"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M5 9V5M5 5V1M5 5H9M5 5H1"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-width="1.5"
                />
            </svg>
        </button>
    </div>
    <button
        v-if="options.length > limit"
        class="px-2.5 mb-4 flex-nowrap text-center gap-1.5 py-0.5 rounded-full transition-all duration-200 flex items-center justify-center text-sm select-none border border-blue-100 text-blue-300 !cursor-pointer"
        type="button"
        @click="showAll = !showAll"
    >
        <span> Show {{ showAll ? "less" : "more" }} </span>
    </button>
    <label v-if="help" class="block text-[10px] text-gray-200 text-medium">{{
        help
    }}</label>
    <FormKit
        v-if="enableValidation"
        v-model="_validationSelected"
        :name="'option_validation_id_' + name"
        required
        type="hidden"
        validation="required"
    />
</template>

<script>
import Option from "./Option.vue";

export default {
    props: {
        options: Array,
        name: { type: String, default: "options" },
        ref: { type: String, default: "options" },
        label: String,
        help: String,
        addAction: Function,
        addLabel: String,
        nameBy: { type: String, default: "name" },
        value: Array,
        limit: {
            type: Number,
            default: 10,
        },
    },
    data() {
        return {
            selected: [],
            showAll: false,
            _validationSelected: [],
            initial: true,
            enableValidation: false,
        };
    },
    methods: {
        sync() {
            let checked =
                this.$refs[this.ref].querySelectorAll("input:checked");
            // map the checked options to an array of their values
            this.selected = Array.from(checked).map((option) => option.value);
            this._validationSelected = this.selected;

            if (this.value !== undefined)
                this.$emit(
                    "update:value",
                    JSON.parse(JSON.stringify(this.selected))
                );
            else
                this.$emit(
                    "update:options",
                    JSON.parse(JSON.stringify(this.selected))
                );
        },
        isChecked(option) {
            return (
                this.selected?.includes(option.toString()) ||
                this.value?.includes(option)
            );
        },
    },
    components: {
        Option,
    },
    updated() {
        if (this.value !== undefined && this.initial) {
            this.selected = this.value.map((option) => option.toString());
            this._validationSelected = this.selected;
            this.initial = false;
        }
    },
    created() {
        setTimeout(() => {
            this._validationSelected = this.value;
            this.enableValidation = true;
        }, 100);
    },
    watch: {
        selected() {
            this._validationSelected = this.selected;
        },
    },
};
</script>
