/**
 * Bulk Add Options Modal Component
 * Allows users to paste multiple options (one per line) and add them to the field
 */
Vue.component('field-bulk-add-options', {
    template: '#tmpl-wpuf-field-bulk-add-options',

    props: {
        show: {
            type: Boolean,
            default: false
        },
        syncValue: {
            type: Boolean,
            default: true
        },
        existingOptionsCount: {
            type: Number,
            default: 0
        }
    },

    data: function () {
        return {
            inputText: '',
            maxOptions: 1000
        };
    },

    watch: {
        show: function (newVal) {
            if (newVal) {
                // Reset input when modal opens
                this.inputText = '';
                // Focus textarea after Vue updates DOM
                var self = this;
                this.$nextTick(function () {
                    var textarea = self.$el.querySelector('textarea');
                    if (textarea) {
                        textarea.focus();
                    }
                });
            }
        }
    },

    methods: {
        /**
         * Parse and validate the input text
         * @returns {Array} Array of option labels
         */
        parseOptions: function () {
            if (!this.inputText || !this.inputText.trim()) {
                return [];
            }

            // Split by newlines (handle both \n and \r\n)
            var lines = this.inputText.split(/\r?\n/);
            var options = [];

            for (var i = 0; i < lines.length; i++) {
                var trimmed = lines[i].trim();
                // Filter out empty lines
                if (trimmed) {
                    options.push(trimmed);
                }
            }

            return options;
        },

        /**
         * Validate that adding these options won't exceed the limit
         * @param {Array} newOptions - Array of option labels
         * @returns {Object} Validation result with isValid and message
         */
        validateOptions: function (newOptions) {
            var totalOptions = this.existingOptionsCount + newOptions.length;

            if (totalOptions > this.maxOptions) {
                var canAdd = this.maxOptions - this.existingOptionsCount;
                return {
                    isValid: false,
                    message: 'You can only add ' + canAdd + ' more option(s). The limit is ' + this.maxOptions + ' options total.'
                };
            }

            if (newOptions.length === 0) {
                return {
                    isValid: false,
                    message: 'Please enter at least one option.'
                };
            }

            return {
                isValid: true,
                message: ''
            };
        },

        /**
         * Handle Add Options button click
         */
        handleAddOptions: function () {
            var newOptions = this.parseOptions();
            var validation = this.validateOptions(newOptions);

            if (!validation.isValid) {
                // Emit error event to parent
                this.$emit('error', validation.message);
                return;
            }

            // Emit success event with parsed options
            this.$emit('add-options', newOptions);
            this.inputText = '';
        },

        /**
         * Handle Cancel button click
         */
        handleCancel: function () {
            this.inputText = '';
            this.$emit('close');
        },

        /**
         * Handle Escape key to close modal
         */
        handleKeydown: function (event) {
            if (event.key === 'Escape') {
                this.handleCancel();
            }
        }
    }
});

