import {Component} from '../../vues6.js'
import {ActionService} from '../service/Action.service.js'

const template = `
<span v-if="!format || format === 'main'">
    <a v-if="action.overall" :class="'btn btn-icon-split btn-' + action.color" href="#" @click="onClick">
        <span class="icon text-white-50">
            <i :class="'fas ' + action.icon"></i>
        </span>
        <span class="text">{{ action.title }}</span>
    </a>
</span>
`
export class ActionButtonComponent extends Component {
    static get selector() { return 'cobalt-action-button' }
    static get template() { return template }
    static get props() { return ['action', 'format'] }

    async onClick() {
        if ( this.action.defer ) {
            return this.$emit('perform')
        }

        await ActionService.get().perform(this.action)
    }
}