<template>
    <div class="flex-1 w-full py-1">
        <FormKit
            :ref="id"
            :id="id"
            v-model="name"
            :classes="{
                outer: 'mb-1.5',
            }"
            :label="label"
            @keyup.enter.prevent="addDeliverable"
            @keydown.enter.prevent="addDeliverable"
            @blur.prevent="addDeliverable"
            :name="id"
            type="text"
            validation="length:2,255"
            :validation-label="'deliverable'"
        >
            <template #suffix>
                <button type="button" @click="addDeliverable">
                    <svg
                        width="16"
                        height="17"
                        viewBox="0 0 16 17"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <g clip-path="url(#clip0_1111_54294)">
                            <path
                                d="M8 3.83301V13.1663"
                                stroke="#2C3E50"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                            <path
                                d="M3.33331 8.5H12.6666"
                                stroke="#2C3E50"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </g>
                        <defs>
                            <clipPath id="clip0_1111_54294">
                                <rect
                                    width="16"
                                    height="16"
                                    fill="white"
                                    transform="translate(0 0.5)"
                                />
                            </clipPath>
                        </defs>
                    </svg>
                </button>
            </template>
        </FormKit>

        <ul class="flex flex-col gap-1.5 w-full">
            <li
                v-for="(deliverable, index) in _deliverables"
                :key="deliverable + index"
                class="flex items-center justify-between w-full px-2.5 py-3 bg-blue-100 text-blue-300 rounded-lg"
            >
                <span>
                    {{ deliverable.name }}
                </span>
                <button type="button" @click="removeDeliverable(index)">
                    <svg
                        width="16"
                        height="17"
                        viewBox="0 0 16 17"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <g clip-path="url(#clip0_1111_54300)">
                            <path
                                d="M12 4.5L4 12.5"
                                stroke="#F1416C"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                            <path
                                d="M4 4.5L12 12.5"
                                stroke="#F1416C"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </g>
                        <defs>
                            <clipPath id="clip0_1111_54300">
                                <rect
                                    width="16"
                                    height="16"
                                    fill="white"
                                    transform="translate(0 0.5)"
                                />
                            </clipPath>
                        </defs>
                    </svg>
                </button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: null,
        },
        deliverables: {
            type: Array,
            default: () => [],
        },
        id: {
            type: String,
            default: "deliverable_" + Math.random().toString(36).substr(2, 9),
        },
    },
    data() {
        return {
            _deliverables: this.deliverables,
            name: "",
        };
    },
    watch: {
        _deliverables(value) {
            this.$emit("update:deliverables", value);
        },
    },
    methods: {
        getSelected() {
            return this.internalSelected;
        },
        addDeliverable() {
            this.name = this.name.trim();
            if (this.name.length > 1) {
                this._deliverables.push({
                    name: this.name,
                });
                this.name = "";
            }
        },
        removeDeliverable(index) {
            this._deliverables.splice(index, 1);
        },
    },
};
</script>
