# Source: frontend/src/components/GridActionButton.component.js

    import {Component} from '../../lib/vues6.js'

    const template = `
    <div class="component-action-button">
        <button
            v-if="!hidden"
            v-bind:style="{border: '2px solid lightgrey', borderRadius: '3px', backgroundColor: color, color: 'white'}"
            @click="on_click($event)"
        >{{ text }}</button>
    </div>
    `

    /**
     * Component representing an action button that can be embedded in the shared grid.
     * @extends Component
     */
    class GridActionButtonComponent extends Component {
        static get selector() { return 'app-action-button' }
        static get template() { return template }
        static get props() { return ['row', 'col'] }

        /**
         * The text shown on the action button.
         * @type {string}
         */
        text = ''

        /**
         * The CSS color of the action button.
         * @type {string}
         */
        color = 'white'

        /**
         * If true, the action button will be hidden.
         * @type {boolean}
         */
        hidden = false

        /**
         * Called when the component is instantiated. Updates the text, color, and hide status.
         * @return {Promise<void>}
         */
        async vue_on_create() {
            this.update_text()
            this.update_color()
            this.update_hidden()
        }

        /**
         * Called when the row value changes. Updates the text, color, and hide status.
         */
        watch_row() {
            this.update_text()
            this.update_color()
            this.update_hidden()
        }

        /**
         * Called when the column value changes. Updates the text, color, and hide status.
         */
        watch_col() {
            this.update_text()
            this.update_color()
            this.update_hidden()
        }

        /**
         * Determine the text to show on the button based on the column definition.
         */
        update_text() {
            if ( typeof this.col.button_text === 'function' ) {
                this.text = this.col.button_text(this.row, this.col)
            } else {
                this.text = this.col.button_text || ''
            }
        }

        /**
         * Determine the color to show on the button based on the column definition.
         */
        update_color() {
            if ( typeof this.col.button_color === 'function' ) {
                this.color = this.col.button_color(this.row, this.col)
            } else {
                this.color = this.col.button_color || 'white'
            }
        }

        /**
         * Determine whether the button should be shown or not, based on the column definition.
         */
        update_hidden() {
            if ( !('button_hidden' in this.col) ) {
                this.hidden = false;
            } else if ( typeof this.col.button_hidden === 'function' ) {
                this.hidden = this.col.button_hidden(this.row, this.col)
            } else {
                this.hidden = this.col.button_hidden
            }
        }

        /**
         * Called when the button is clicked. Emits a click event and updates the text, color, and hide status.
         * @param {MouseEvent} $event
         */
        on_click($event) {
            this.$emit('click', [this.row, this.col])
            this.update_text()
            this.update_color()
            this.update_hidden()
        }
    }

    export default GridActionButtonComponent