import { Component } from '../../lib/vues6/vues6.js'
import { action_service } from '../service/Action.service.js'
import { message_service } from '../service/Message.service.js'

const template = `
<div>
    <div class="row mb-4">
        <div class="col-10"><h3>{{ resource_class.plural }}</h3></div>
        <div class="col-2 text-right" v-if="definition.actions">
            <button
                :class="['btn', 'btn-'+(action.color || 'secondary'), 'btn-sm']"
                type="button"
                v-for="action of definition.actions"
                @click="perform($event, action)"
                v-if="action.position === 'main'"
            >{{ action.text }}</button>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col" v-for="col of definition.columns">{{ col.name }}</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(row, index) of data">
                <th scope="row">{{ index + 1 }}</th>
                <td v-for="col of definition.columns">
                    <span v-if="typeof col.renderer === 'function'">{{ col.renderer(row[col.field]) }}</span>
                    <span v-if="col.renderer === 'boolean'">{{ row[col.field] ? 'Yes' : 'No' }}</span>
                    <span v-if="col.renderer !== 'boolean' && typeof col.renderer !== 'function'">{{ col.field in row ? row[col.field] : '-' }}</span>
                </td>
                <td>
                    <button
                        type="button"
                        :class="['mr-2', 'btn', 'btn-sm', 'btn-'+(action.color || 'secondary')]"
                        v-for="action of definition.actions"
                        v-if="action.position === 'row'"
                        @click="perform($event, action, row)"
                    ><i :class="action.icon" v-if="action.icon"></i> {{ action.text }}</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
`

export default class ListingComponent extends Component {
    static get selector() { return 'cobalt-listing' }
    static get template() { return template }
    static get props() { return ['resource'] }

    definition = {}
    data = []
    resource_class = {}

    async vue_on_create() {
        // Load the resource
        const resource_mod = await import(`../resource/${this.resource}.resource.js`)
        if ( !resource_mod )
            throw new Error('Unable to load Cobalt listing resource.')

        const rsc_name = this.resource.toLowerCase().replace(/\//g, '_')
        if ( !resource_mod[rsc_name] )
            throw new Error('Unable to extract resource object from module.')

        this.resource_class = resource_mod[rsc_name]
        await this.load()
    }

    async load() {
        this.definition = this.resource_class.listing_definition
        this.data = await this.resource_class.list()
    }

    async perform($event, action, row = undefined) {
        if ( action.confirm ) {
            message_service.modal({
                title: 'Are you sure?',
                message: `You are about to ${action.action}${row ? ' this '+this.resource_class.item : ''}. Do you want to continue?`,
                buttons: [
                    {
                        text: 'Cancel',
                        type: 'close',
                    },
                    {
                        text: 'Continue',
                        class: ['btn', 'btn-primary'],
                        type: 'close',
                        on_click: async () => {
                            await action_service.perform({...action, resource: this.resource, ...(row ? {id: row.id} : {})})
                            await this.load()
                        },
                    },
                ],
            })
        } else {
            await action_service.perform({...action, resource: this.resource, ...(row ? {id: row.id} : {})})
            await this.load()
        }
    }
}