/**
 * Field template: Signature
 */
Vue.component('form-signature_field', {
    template: '#tmpl-wpuf-form-signature_field',

    mixins: [
        wpuf_mixins.form_field_mixin
    ],

    data: function() {
        return {
            show_custom_dimensions: false
        };
    },

    created: function() {
        // Show custom dimensions if canvas size is 'custom'
        this.show_custom_dimensions = this.field.canvas_size === 'custom';
    },

    computed: {
        /**
         * Preview container style
         */
        previewStyle: function() {
            var value = this.field.show_border;
            var showBorder = value === 'yes' || value === 'on' || value === true || value === 1;
            
            return {
                border: showBorder ? '1px dashed #ddd' : 'none',
                padding: '20px',
                'text-align': 'center',
                'background-color': '#f9f9f9'
            };
        },

        /**
         * Check if border should be shown
         */
        shouldShowBorder: function() {
            var value = this.field.show_border;
            return value === 'yes' || value === 'on' || value === true || value === 1;
        },

        /**
         * Check if clear button should be shown
         */
        shouldShowClear: function() {
            var value = this.field.show_clear;
            return value === 'yes' || value === 'on' || value === true || value === 1;
        }
    },

    watch: {
        'field.canvas_size': function(newVal) {
            this.show_custom_dimensions = newVal === 'custom';

            // Auto-set dimensions when preset is selected
            if (newVal !== 'custom') {
                switch (newVal) {
                    case 'small':
                        this.field.canvas_width = 300;
                        this.field.canvas_height = 100;
                        break;
                    case 'medium':
                        this.field.canvas_width = 450;
                        this.field.canvas_height = 150;
                        break;
                    case 'large':
                        this.field.canvas_width = 600;
                        this.field.canvas_height = 200;
                        break;
                }
            }
        }
    }
});