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 PermittedOccupier = Dezrez.Core.DataContracts.External.Api.Role.Query.Get.Group.PermittedOccupierDataContract;
import TenantRole = Dezrez.Core.DataContracts.External.Api.Role.Query.Get.Group.TenantRoleDataContract;

class PermittedOccupiresConfig extends StatefulView<IState> {
    construct(tenantRole: TenantRole) {
        return this.bindChildWithProps<IDataTableSettings>(DataTable, {
            actions: [
                {
                    text: 'Remove',
                    buttonClass: '',
                    execute: (occupier: PermittedOccupier) => {
                        // TODO - Remove Permitted Occupier
                    },
                    position: 'menu'
                },
                {
                    text: 'Add permitted occupier',
                    buttonClass: '',
                    execute: () => {
                        // TODO - Add Permitted Occupier Modal
                    },
                    position: 'right'
                }
            ],
            columns: ko.observableArray([
                { className: 'sm', name: 'Name' },
                { className: 'sm', name: 'Relationship' },
                { className: 'sm', name: 'DOB' }
            ]),
            title: 'Permitted Occupiers',
            itemTemplate: require('./permitted-occupires.item.html'),
            items: tenantRole.PermittedOccupiers
        });
    }
}

export const permittedOccupiresConfig = new PermittedOccupiresConfig();