import { Component, StatefulView, guid, DateHelper } from '@dezrez/core';
import { DataTable, IDataTableSettings } from '../../../components/datatable';
import { Dezrez } from '@dezrez/typings-rezi';
import { IState } from '../../../store';
import AddPet = Dezrez.Core.DataContracts.External.Api.Role.Command.Pets.SetPetDataContract;
import Pet = Dezrez.Core.DataContracts.External.Api.Role.Query.Get.Group.PermittedPetDataContract;
import TenantRole = Dezrez.Core.DataContracts.External.Api.Role.Query.Get.Group.TenantRoleDataContract;

class PetsConfig extends StatefulView<IState> {
    construct(tenantRole: TenantRole) {
        return this.bindChildWithProps<IDataTableSettings>(DataTable, {
            actions: [
                {
                    text: 'Remove',
                    buttonClass: '',
                    execute: (pet: Pet) => {
                        // TODO - Remove Pet
                    },
                    position: 'menu'
                },
                {
                    text: 'Add pet',
                    buttonClass: '',
                    execute: () => {
                        // TODO - Add Modal
                    },
                    position: 'right'
                }
            ],
            columns: ko.observableArray([
                { className: 'md', name: 'Type' },
                { className: 'sm', name: 'Breed' },
                { className: 'sm', name: 'Deposit' }
            ]),
            title: 'Pets',
            itemTemplate: require('./pets.item.html'),
            items: tenantRole.PermittedPets
        });
    }
}

export const petsConfig = new PetsConfig();